cli3.0配置及使用注意事项详解(2)

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

您可能感兴趣的文章: