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

Question

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.

When I run npm run serve: the generated path should be http://0.0.0.0:8080/app.js (so that the file is served by npm and I can have hot reload etc.)
When I run npm run build: the generated path should be http://0.0.0.0:8000/static/app.js (so that django can serve the file. please note the port number 8000, not 8080)

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.

tianzhu · Accepted Answer · 2021-05-06 21:15:32Z

3

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

edited May 6, 2021 at 21:15

answered May 6, 2021 at 14:45

tianzhu

314 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related