CODEWITHSUNDEEP
vue.js
Jeremy
Jeremy

Reputation: 2519

Configure Vue to have a development and a production build

I inherited a Vue project that only builds production builds and uglifies everything. It doesn't have a webpack.config.js like I'm used to, it only has a vue.config.js file. When I do npm run build it builds a production. The build command is "build": "vue-cli-service build" and I don't see a way to do something like --mode=development.

I tried adding a webpack.config.js file which built, but at the same time broke the webpage, because it no longer built the same.

Here is my vue.config.js file:

const path = require('path');
const CopyWebpackPlugin = require('copy-webpack-plugin');


module.exports = {
    lintOnSave: true,
    baseUrl: 'http://localhost:8080',
    configureWebpack: {
        entry: './src/main.js',
        module: {
            rules: [
                {
                    test: /libs\.js$/,
                    use: {
                        loader: 'script-loader'
                    }
                },
                {
                    test: /angLibs\.js$/,
                    use: {
                        loader: 'script-loader'
                    }
                },
                {
                    test: /welcome\.js$/,
                    use: {
                        loader: 'script-loader'
                    }
                },
                {
                    test: /app\.js$/,
                    use: {
                        loader: 'script-loader'
                    }
                }
            ]

        },
        output: {
            publicPath: process.env.VUE_APP_ROOT_API + '/',
            chunkFilename: '[name].bundle.js'
        },
        plugins: [
            new CopyWebpackPlugin([
                { from: path.resolve(__dirname, './static/App/i18n/*.*'), to: path.resolve(__dirname, './dist/'), force: true }
            ], { copyUnmodified: true, context: 'static/' }),
            new CopyWebpackPlugin([
                { from: path.resolve(__dirname, './static/Content/*/*.*'), to: path.resolve(__dirname, './dist/'), force: true }
            ], { copyUnmodified: true, context: 'static/' }),
            new CopyWebpackPlugin([
                { from: path.resolve(__dirname, './static/fonts/*.*'), to: path.resolve(__dirname, './dist/'), force: true }
            ], { copyUnmodified: true, context: 'static/' }),
            new CopyWebpackPlugin([
                { from: path.resolve(__dirname, './static/react/*.*'), to: path.resolve(__dirname, './dist/'), force: true }
            ], { copyUnmodified: true, context: 'static/' })
        ]
    }
};

I would like to have a development build that is quicker and is not uglified/minified (or retains the map files of files it includes in the webpack).

Upvotes: 3

Views: 14033

Answers (1)

Phil
Phil

Reputation: 164766

That's a Vue CLI v3 build. For a webpack dev-server with hot-reload, use npm run serve.

Otherwise, you can build in development mode via

npx vue-cli-service build --mode development

or, if you don't have npx

./node_modules/.bin/vue-cli-service build --mode development

See https://cli.vuejs.org/guide/mode-and-env.html

Another option is to add a new script to package.json, eg

"buildDev": "vue-cli-service build --mode development"

and run

npm run buildDev

For configuring Webpack, see https://cli.vuejs.org/guide/webpack.html.

For example

// vue.config.js
module.exports = {
  configureWebpack: {
    // config goes here
  }
}

Upvotes: 8

Related Questions