CODEWITHSUNDEEP
vue.jsnpmwebpack
gkpo
gkpo

Reputation: 2662

Different vue.config.js for npm run serve and npm run build

I'm overriding webpack config using vue.config.js:

const BundleTracker = require("webpack-bundle-tracker");

module.exports = {
  publicPath: 'http://0.0.0.0:8080',
  outputDir: './dist/',

  chainWebpack: config => {

    config.optimization
      .splitChunks(false)

    config
      .plugin('BundleTracker')
      .use(BundleTracker, [{ filename: './webpack-stats.json' }])

    config.resolve.alias
      .set('__STATIC__', 'static')

    config.devServer
      .public('http://0.0.0.0:8080')
      .host('0.0.0.0')
      .port(8080)
      .hotOnly(true)
      .watchOptions({ poll: 1000 })
      .https(false)
      .headers({ "Access-Control-Allow-Origin": ["*"] })
  }
};

The webpack-bundle-tracker plugin generates a file called webpack-stats.json:

{
  "status": "done",
  "publicPath": "http://0.0.0.0:8080/",
  "chunks": {
    "app": [
      {
        "name": "app.js",
        "publicPath": "http://0.0.0.0:8080/app.js",
        "path": "/Users/me/dev/vue-app/dist/app.js"
      }
    ]
  }
}

My problem is that depending on whether I am in development or in production, I want the path to the file to be different.

So I'm wondering if there's a way for vue.config.js to have 2 versions, one that would be used by serve the other one by build.

Upvotes: 2

Views: 1292

Answers (1)

tianzhu
tianzhu

Reputation: 31

I know this question is like two years old. Use the absolute path for the environment variable VUE_CLI_SERVICE_CONFIG_PATH. You could use $PWD to instead current absolute path.

// package.json
"scripts": {
    "serve": "vue-cli-service serve",
    "serve:test": "env VUE_CLI_SERVICE_CONFIG_PATH=\"/var/www/html/your_project/vue.config_serve_test.js\" vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
},

npm run serve:test will use vue.config_serve_test.js

npm run build will use vue.config.js

Upvotes: 3

Related Questions