vue-cli 3.0 配置小结

最近上手试了试vue-cli(v3.0.0-rc.5)，小结一下

1.环境变量相关

在一般项目中我们针对不同的开发环境会配置不同的环境变量：

• 开发环境（development）
• 测试环境(production)
• 发布环境（release）

1.在项目根目录下新建三个文件：.env.development，.env.production，.env.release

//.env.development
NODE_ENV=development
VUE_APP_XXX=XXX
...

//.env.production
NODE_ENV=production
VUE_APP_XXX=XXX

outputDir=dist

//.env.release
NODE_ENV=production
VUE_APP_XXX=XXX

outputDir=release

2.vue.config.js配置

module.exports={
    ...
    outputDir: process.env.outputDir,
    ...
}

3.package.json配置

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "release": "vue-cli-service build --mode release",
    "lint": "vue-cli-service lint"
  },

4.打包命令

• 打包测试版本：npm run build

• 打包正式版本：npm run release

  打包好的文件分别放在dist/release中

2.项目中配置目录别名alias

修改vue.config.js

const path = require('path')
function resolve (dir) {
  return path.join(__dirname, dir)
}

module.exports={
    ...
    //  将接收ChainableConfig由webpack-chain提供支持的实例的函数。
    chainWebpack: config => {
        config.resolve.alias
            .set('@', resolve('src'))
            .set('assets',resolve('src/assets'))
            .set('components',resolve('src/components'))
    },
    ...
}

3.webpack代理配置相关

修改vue.config.js

module.exports={
   ...
  //  代理相关配置
  devServer: {
    host: '0.0.0.0',
    port: 8080,
    https: false,
    hotOnly: false,
    proxy: null, // string | Object
  },
  ...
}

4.打包文件优化

1.安装插件

• uglifyjs-webpack-plugin //去除console
• compression-webpack-plugin //gzip压缩

npm install --save -dev uglifyjs-webpack-plugin compression-webpack-plugin

2.vue.config.js配置

//去console插件
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
//gzip压缩插件
const CompressionWebpackPlugin = require('compression-webpack-plugin')

module.exports={
  ...
  //  webpack插件配置
  configureWebpack: config => {
    let plugins = [
      new UglifyJsPlugin({
        uglifyOptions: {
          compress: {
            warnings: false,
            drop_debugger: true,
            drop_console: true,
          },
        },
        sourceMap: false,
        parallel: true,
      }),
      new CompressionWebpackPlugin({
        asset: '[path].gz[query]',
        algorithm: 'gzip',
        test: new RegExp(
          '\\.(' +
          ['js', 'css'].join('|') +
          ')$',
        ),
        threshold: 10240,
        minRatio: 0.8,
      }),
    ]
    if (process.env.NODE_ENV !== 'development') {
      config.plugins = [...config.plugins, ...plugins]
    }
  },
  ...
}

5.vue.config.js完整默认配置

可直接拷贝到自己项目中自定义修改

module.exports = {
     // 基本路径
     baseUrl: '/',
     // 输出文件目录
     outputDir: 'dist',
     // 用于嵌套生成的静态资产（js，css，img，fonts）的目录。
     //assetsDir: '',
     // 以多页模式构建应用程序。
     pages: undefined,
     // eslint-loader 是否在保存的时候检查
     lintOnSave: true,
     // 是否使用包含运行时编译器的Vue核心的构建。
     runtimeCompiler: false,
     // 默认情况下babel-loader忽略其中的所有文件node_modules。
     transpileDependencies: [],
     // 生产环境sourceMap
     productionSourceMap: true,
     // webpack配置
     configureWebpack: () => {},
     chainWebpack: () => {},
     // css相关配置
     css: {
      // 启用 CSS modules
      modules: false,
      // 是否使用css分离插件
      extract: true,
      // 开启 CSS source maps?
      sourceMap: false,
      // css预设器配置项
      loaderOptions: {},
     },
     // webpack-dev-server 相关配置
     devServer: {
      host: '0.0.0.0',
      port: 8080,
      https: false,
      hotOnly: false,
      proxy: null, // 设置代理
      before: app => {}
     },
     // enabled by default if the machine has more than 1 cores
     parallel: require('os').cpus().length > 1,
     // PWA 插件相关配置
     pwa: {},
     // 第三方插件配置
     pluginOptions: {
      // ...
     }
}

未完待续…