TechQA.

Linked Questions

Popular Questions

Can't tell if Vue project is in debug more or release mode for Visual Studio

Asked by At

I'm building this Vue app with Visual Studio and regardless of the build mode (debug/release) I still get this message below in the console.

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

Is there a way to know if I'm really in release mode or if Vue is just throwing me that message?

I know that usually it means the JS files have been minified, is that the case with a Vue app?

I'm not sure if this helps but here is my packages.json file

{
  "name": "aspnetcore-vuejs",
  "description": "ASP.NET Core & VueJS Starter project",
  "author": "Mark Pieszak",
  "scripts": {
    "dev": "cross-env ASPNETCORE_ENVIRONMENT=Development NODE_ENV=development dotnet run",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
    "install": "webpack --config webpack.config.vendor.js"
  },
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.2.4",
    "@fortawesome/free-solid-svg-icons": "^5.3.1",
    "@fortawesome/vue-fontawesome": "^0.1.1",
    "axios": "^0.15.3",
    "bootstrap-vue": "^2.0.0-rc.11",
    "core-js": "^2.4.1",
    "dayjs": "^1.7.5",
    "font-awesome": "^4.6.3",
    "material-design-icons-iconfont": "^3.0.3",
    "vue": "^2.1.8",
    "vue-infinite-loading": "^2.3.3",
    "vue-masked-input": "^0.5.2",
    "vue-router": "^2.1.1",
    "vue-select": "^2.5.0",
    "vue-server-renderer": "^2.1.8",
    "vue-template-compiler": "^2.1.8",
    "vuetify": "^1.2.3",
    "vuex": "^2.1.1",
    "vuex-router-sync": "^4.0.1"
  },
  "devDependencies": {
    "aspnet-webpack": "^2.0.1",
    "babel-core": "^6.21.0",
    "babel-loader": "^6.2.10",
    "babel-plugin-transform-async-to-generator": "^6.22.0",
    "babel-plugin-transform-runtime": "^6.15.0",
    "babel-polyfill": "^6.26.0",
    "babel-preset-es2015": "^6.18.0",
    "babel-preset-stage-2": "^6.18.0",
    "babel-register": "^6.18.0",
    "bootstrap": "^4.1.3",
    "cross-env": "^3.1.3",
    "css-loader": "^0.26.1",
    "event-source-polyfill": "^0.0.7",
    "extract-text-webpack-plugin": "^2.0.0-rc",
    "file-loader": "^0.9.0",
    "jquery": "^2.2.1",
    "node-sass": "^4.1.0",
    "optimize-css-assets-webpack-plugin": "^1.3.1",
    "regenerator-runtime": "^0.12.1",
    "sass-loader": "^4.1.0",
    "style-loader": "^0.13.1",
    "url-loader": "^0.5.7",
    "vue-loader": "^10.0.2",
    "webpack": "^2.2.0",
    "webpack-hot-middleware": "^2.12.2"
  }
}

visual-studio debugging vue.js release
Original Q&A

1 Answers

0
jom On

As the Vue.js deployment guide you posted suggests, please check your webpack.config.js and be sure to use the right mode targetting production environment when you deploy the app.

In Webpack 4+, you can do:

module.exports = {
  mode: 'production'
}

But in Webpack 3 and earlier, you'll need to use DefinePlugin:

var webpack = require('webpack')

module.exports = {
  // ...
  plugins: [
    // ...
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('production')
    })
  ]
}

When you are ready, you should simply need to run npm run build to start bundling your modules.

Related and useful readings:

Related Questions