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

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

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

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

4170閲覧

【Vue.js】webpackを使いJSをproductionモードでビルドするとブラウザにdevelopmentのエラーが出る

n-house

総合スコア4

Vue.js

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2020/02/29 08:14

編集2020/02/29 09:41

前提・実現したいこと

Vue.jsを使用してます。
webpackでJSをproductionモードでビルドしてるのですが、ブラウザにdevelopmentのエラーが出るのでこれを削除したいです。

発生している問題・エラーメッセージ

productionモードでビルドしてるのですが、ブラウザのコンソールに下記のエラーが出ます。(本番環境)
バンドルされたJSはちゃんと圧縮されてます。

You are running Vue in development mode. Make sure to turn on production mode when deploying for production. See more tips at https://vuejs.org/guide/deployment.html

該当のソースコード

package.json

json

1"scripts": { 2 "development": "cross-env NODE_ENV=development webpack-dev-server", 3 "production": "cross-env NODE_ENV=production webpack", 4},

webpack.config.js

JavaScript

1const VueLoaderPlugin = require('vue-loader/lib/plugin'); 2const MiniCssExtractPlugin = require('mini-css-extract-plugin'); 3const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin'); 4const TerserJSPlugin = require('terser-webpack-plugin'); 5 6const isDevelopment = process.env.NODE_ENV === 'development'; 7 8module.exports = { 9 mode: isDevelopment ? 'development' : 'production', 10 entry: { 11 app: './src/app.ts' 12 }, 13 output: { 14 path: `${__dirname}/public`, 15 filename: '[name].js' 16 }, 17 module: { 18 rules: [ 19 { 20 test: /.ts$/, 21 exclude: /node_modules/, 22 loader: 'ts-loader', 23 options: { 24 appendTsSuffixTo: [/.vue$/] 25 } 26 }, 27 { 28 test: /.vue$/, 29 exclude: /node_modules/, 30 loader: 'vue-loader' 31 }, 32 { 33 test: /.css$/, 34 use: [ 35 isDevelopment ? 'vue-style-loader' : MiniCssExtractPlugin.loader, 36 'css-loader', 37 { 38 loader: 'postcss-loader', 39 options: { 40 plugins: [ 41 require('postcss-import'), 42 require('autoprefixer') 43 ] 44 } 45 } 46 ] 47 } 48 ] 49 }, 50 resolve: { 51 extensions: ['.ts', '.vue', '.js', '.json'], 52 alias: { 53 vue: 'vue/dist/vue.js' 54 } 55 }, 56 plugins: [ 57 new VueLoaderPlugin(), 58 new MiniCssExtractPlugin({ 59 filename: 'app.css' 60 }) 61 ], 62 optimization: { 63 minimizer: [ 64 new TerserJSPlugin(), 65 new OptimizeCSSAssetsPlugin() 66 ] 67 }, 68 devServer: { 69 contentBase: './public', 70 port: 3001, 71 historyApiFallback: true 72 } 73};

試したこと

Vue.config.productionTip = false;にするとエラーメッセージはでなくなりました。
しかし、ChromeのVue.js devtoolsが動いてしまうので使いたくないと考えてます。

補足情報(FW/ツールのバージョンなど)

  • webpack 4.41.6
  • webpack-cli 3.3.11
  • vue.js 2.6.11

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

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

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

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

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

guest

回答1

0

自己解決

aliasの箇所を vue/dist/vue.esm.js にする事により期待する動作になりました。

投稿2020/03/02 07:00

n-house

総合スコア4

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.47%

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

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

質問する

関連した質問