前提・実現したいこと
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
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。