Vue Cli3 创建项目的方法步骤(2)

用 webpack-chain 修改webpack相关配置，强烈建议先熟悉和vue-cli 源码，以便更好地理解这个选项的配置项。

对模块处理配置

// vue.config.js module.exports = { chainWebpack: config => { config.module .rule('js') .include .add(/some-module-to-transpile/) // 要处理的模块 } }

修改webpack Loader配置

// vue.config.js module.exports = { chainWebpack: config => { config.module .rule('scss') .use('sass-loader') .tap(options => merge(options, { includePaths: [path.resolve(__dirname, 'node_modules')], }) ) } }

修改webpack Plugin配置

// vue.config.js module.exports = { chainWebpack: config => { config .plugin('html') .tap(args => { return [/* new args to pass to html-webpack-plugin's constructor */] }) } }

eg: 在本次项目较小，只对uglifyjs进行了少量的修改，后期如果还有配置上优化会继续添加。

chainWebpack: config => { if (process.env.NODE_ENV === 'production') { config .plugin('uglify') .tap(([options]) =>{ // 去除 console.log return [Object.assign(options, { uglifyOptions: { compress: { drop_console : true, pure_funcs: ['console.log'] }} })] }) } }

全局变量的设置

在项目根目录创建以下项目：

.env # 在所有环节中执行 .env.local # 在所有环境中执行，git会ignored .env.[mode] # 只在特定环境执行( [mode] 可以是 "development", "production" or "test" ) .env.[mode].local # 在特定环境执行, git会ignored .env.development # 只在生产环境执行 .env.production # 只在开发环境执行

在文件里配置键值对：

# 键名须以VUE_APP开头 VUE_APP_SECRET=secret

在项目中访问：

console.log(process.env.VUE_APP_SECRET)

这样项目中的 process.env.VUE_APP_SECRET 就会被 secret 所替代。

vue-cli 3 就项目性能而言已经相当友好了，私有制定性也特别强，各种配置也特别贴心，可以根据项目大小和特性制定私有预设，对前期项目搭建而言效率极大提升了。

具体请查看 Vue Cli 官网