質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

Q&A

解決済

1回答

1789閲覧

【vue】*.vueファイルが見つかりませんとなる

aoisensi

総合スコア29

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

0グッド

1クリップ

投稿2020/01/14 15:25

編集2020/01/14 15:37

webpack初心者です
イメージ説明

test.ts は読み込めるのですが GameMatch.vue は読み込めません

. ファイル構造 ├── * ├── assets │ └── js │ ├── components │ │ ├── test.ts │ │ └── GameMatch.vue │ └── application.ts └── webpack.config.js

js

1//webpack.config.js 2 3const Webpack = require("webpack"); 4const Glob = require("glob"); 5const CopyWebpackPlugin = require("copy-webpack-plugin"); 6const MiniCssExtractPlugin = require("mini-css-extract-plugin"); 7const ManifestPlugin = require("webpack-manifest-plugin"); 8const CleanObsoleteChunks = require('webpack-clean-obsolete-chunks'); 9const UglifyJsPlugin = require("uglifyjs-webpack-plugin"); 10const LiveReloadPlugin = require('webpack-livereload-plugin'); 11const VueLoaderPlugin = require('vue-loader/lib/plugin'); 12 13const configurator = { 14 entries: function () { 15 var entries = { 16 application: [ 17 "./assets/js/application.ts", 18 './assets/css/application.scss', 19 ], 20 } 21 22 Glob.sync("./assets/*/*.*").forEach((entry) => { 23 if (entry === './assets/css/application.scss') { 24 return 25 } 26 27 let key = entry.replace(/(./assets/(src|js|css|go)/)|.(ts|js|s[ac]ss|go)/g, '') 28 if (key.startsWith("_") || (/(ts|js|s[ac]ss|go)$/i).test(entry) == false) { 29 return 30 } 31 32 if (entries[key] == null) { 33 entries[key] = [entry] 34 return 35 } 36 37 entries[key].push(entry) 38 }) 39 return entries 40 }, 41 42 plugins() { 43 var plugins = [ 44 new CleanObsoleteChunks(), 45 new MiniCssExtractPlugin({ filename: "[name].[contenthash].css" }), 46 new CopyWebpackPlugin([{ from: "./assets", to: "" }], { copyUnmodified: true, ignore: ["css/**", "js/**", "src/**"] }), 47 new Webpack.LoaderOptionsPlugin({ minimize: true, debug: false }), 48 new ManifestPlugin({ fileName: "manifest.json" }), 49 new VueLoaderPlugin(), 50 ]; 51 52 return plugins 53 }, 54 55 moduleOptions: function () { 56 return { 57 rules: [ 58 { 59 test: /.s[ac]ss$/, 60 use: [ 61 MiniCssExtractPlugin.loader, 62 { loader: "css-loader", options: { sourceMap: true } }, 63 { loader: "sass-loader", options: { sourceMap: true } } 64 ] 65 }, 66 { test: /.tsx?$/, use: "ts-loader", exclude: /node_modules/ }, 67 { test: /.jsx?$/, loader: "babel-loader", exclude: /node_modules/ }, 68 { test: /.(woff|woff2|ttf|svg)(?v=\d+.\d+.\d+)?$/, use: "url-loader" }, 69 { test: /.eot(?v=\d+.\d+.\d+)?$/, use: "file-loader" }, 70 { test: /.go$/, use: "gopherjs-loader" }, 71 { test: /.vue$/, loader: "vue-loader", exclude: /node_modules/ }, 72 ] 73 } 74 }, 75 76 buildConfig: function () { 77 // NOTE: If you are having issues with this not being set "properly", make 78 // sure your GO_ENV is set properly as `buffalo build` overrides NODE_ENV 79 // with whatever GO_ENV is set to or "development". 80 const env = process.env.NODE_ENV || "development"; 81 82 var config = { 83 mode: env, 84 entry: configurator.entries(), 85 output: { filename: "[name].[hash].js", path: `${__dirname}/public/assets` }, 86 plugins: configurator.plugins(), 87 module: configurator.moduleOptions(), 88 resolve: { 89 extensions: ['.ts', '.js', '.json', '.vue'], 90 alias: { 91 vue$: `${__dirname}/node_modules/vue/dist/vue.esm.js`, 92 router$: `${__dirname}/node_modules/vue-router/dist/vue-router.esm.js`, 93 }, 94 } 95 } 96 97 if (env === "development") { 98 config.plugins.push(new LiveReloadPlugin({ appendScriptTag: true })) 99 return config 100 } 101 102 const uglifier = new UglifyJsPlugin({ 103 uglifyOptions: { 104 beautify: false, 105 mangle: { keep_fnames: true }, 106 output: { comments: false }, 107 compress: {} 108 } 109 }) 110 111 config.optimization = { 112 minimizer: [uglifier] 113 } 114 115 return config 116 } 117} 118 119module.exports = configurator.buildConfig() 120

webpackに不備があると思うのですがどこを直せばうまく読み込めるようになるでしょうか?

なお、バックエンドにはbuffaloというgolang製のフレームワークを使用しています。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

https://qiita.com/kyo_nanba/items/d1678fbf8d3e60f913a1
こちらのページを参考にvue.d.tsを追加したら読み込むようになりました。

投稿2020/01/15 06:53

aoisensi

総合スコア29

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問