vue3.0 vue.config.js 配置实战

项目常用配置

const path = require('path');

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

function resolve(dir) {

     return path.join(__dirname, dir)

}

module.exports = {

     lintOnSave: false, // eslint-loader 是否在保存的时候检查

     outputDir:'dist', // 输出文件目录

     assetsDir:'static', // 放置静态资源的地方 (js/css/img/font/...)

     productionSourceMap: process.env.VUE_APP_ENV != 'prod', //生产环境是否生成 sourceMap 文件 ,此判断条件为不在正式         环境打包时进行输出

     // 调整内部的 webpack 配置。

     chainWebpack: (config) => {

     config.plugins.delete('prefetch'); //prefetch意思是，一旦网络空闲，就自动下载独立.js文件

     //快速找到相应路径，例如，@直接找到项目的src目录

     config.resolve.alias

    .set('@', resolve('src'))

    .set('common', resolve('src/common'))

    .set('base', resolve('src/base'))

    .set('api', resolve('src/api'))

    .set('components', resolve('src/components'))

    .set('static', resolve('static'));

     if (process.env.VUE_APP_ENV == 'prod' && process.env.NODE_ENV != "development") {

            //进行压缩代码

            config.optimization.minimize(true);

            // 进行分包配置

           config.optimization.splitChunks({

                  chunks: 'all'

            })

            // 用cdn方式引入

           config.externals({

                  'vue': 'Vue',

                  'vuex': 'Vuex',

                  'vue-router': 'VueRouter',

                   'mint-ui': 'MINT', // 需用MINT

                   'axios': 'axios'

            })

const TerserPlugin = require('terser-webpack-plugin'); //内置压缩工具包

config.optimization.minimizer([

new TerserPlugin({

terserOptions: {

compress: {

drop_console: true,

drop_debugger: true

},

output: {

// 去掉注释内容

comments: false,

}

}

})

])

}

},

//默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上，例如 https://www.my-app.com/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 https://www.my-app.com/my-app/，则设置 publicPath 为 /my-app/

publicPath: '/test/',

css: {

// 当为true时，css文件名可省略 module 默认为 false

modules: true,

// 是否将组件中的 CSS 提取至一个独立的 CSS 文件中,当作为一个库构建时，你也可以将其设置为 false 免得用户自己导入 CSS

// 默认生产环境下是 true，开发环境下是 false

extract: false,

// 是否为 CSS 开启 source map。设置为 true 之后可能会影响构建的性能

sourceMap: false,

//向 CSS 相关的 loader 传递选项(支持 css-loader postcss-loader sass-loader less-loader stylus-loader)

loaderOptions: { css: {}, less: {} }

},

configureWebpack: (config) => {

let plugins = [

new UglifyJsPlugin({

uglifyOptions: {

compress: {

drop_console: true,

drop_debugger: true

},

output: {

// 去掉注释内容

comments: false,

}

},

sourceMap: false,

// parallel: true,

})

];

// 只有打包生产环境才需要将console删除

if (process.env.VUE_APP_ENV == 'prod') {

config.plugins = [...config.plugins, ...plugins];

}

},

}