vue-cli3.x 基础配置与环境变量设置

发表于 | 分类于

vue-cli3.x 基础配置

项目中配置目录别名 alias：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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'))
    },
    ...
}

其中，vue-cli3.x中已默认配置好 ‘@’ 指向 ‘src’ 目录，如果只需要 ‘@’ 则不需要再配置别名

webpack 代理配置相关

1
2
3
4
5
6
7
8
9
10
11
12
module.exports={
   ...
  //  代理相关配置
  devServer: {
    host: '0.0.0.0',
    port: 8080,
    https: false,
    hotOnly: false,
    proxy: null, // string | Object
  },
  ...
}

正常情况处理跨域只要配置 proxy 即可

打包文件优化配置

这里之说两个常用插件配置：

安装插件：

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

安装命令：npm install uglifyjs-webpack-plugin --save-dev，npm install compression-webpack-plugin --save-dev

在 vue.config.js 中配置：

vue.config.js 完整默认配置为：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
//去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({
        filename: '[path].gz[query]',
        algorithm: 'gzip',
        test: new RegExp('\\.(' + ['js', 'css'].join('|') + ')$'),
        threshold: 10240,
        minRatio: 0.8,
        deleteOriginalAssets: false // 不删除源文件
      })
    ]
    if (process.env.NODE_ENV !== 'development') {
      config.plugins = [...config.plugins, ...plugins]
    }
  },
  ...
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
module.exports = {
     // 基本路径
     publicPath: '/', // 3.3版本前用 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: {
      // ...
     }
}

vue-cli3.x 环境变量设置

为什么会需要配置多种环境变量

一个产品的开发过程中,一般来说都是会经历：本地发开–测试版本部署–测试–预上线–正式上线.对应的每一个环节中的服务器地址,接口地址…等可能都会不一样。那么我们环境变量去处理这些情况。

怎么去配置环境变量

vue-cli 3.0 脚手架构建的项目根目录中新建一个 .env.[model] 文件,model 为一个变量，可以通过这个 model 的变量值来判断当前属于哪个环境。model 可以根据你的需求来修改，该文件中写上对应的键值对。你需要多少个环境，就创建多少个 .env.[model] 在根目录中。

例如你可以创建三个文件，分别为：.env.development，.env.production，.env.release，分别表示：开发环境，生产环境，发布环境。

例如，三个文件的内容分别为：

1
2
3
4
//.env.development
NODE_ENV=development
VUE_APP_XXX=XXX
...
1
2
3
4
5
//.env.production
NODE_ENV=production
VUE_APP_XXX=XXX

outputDir=dist
1
2
3
4
5
//.env.release
NODE_ENV=production
VUE_APP_XXX=XXX

outputDir=release

需要注意的是：在每个配置文件中：NODE_ENV = “XXX” 不可以省略,vue-cli 3.0 会根据 NODE_ENV = “production” 来判断是否是生产环境,如果你改变了这个就会被默认 NODE_ENV = “development,development 和 production 模式下打包出来的包结构会不同,为了一致性,所以配置文件的第一个字段应该设置成为 NODE_ENV = “production” 或者 NODE_ENV=”development”。

例如上面的 outputDir 在 vue.config.js 中可以设置改变打包输出文件名：

1
2
3
4
5
module.exports={
    ...
    outputDir: process.env.outputDir,
    ...
}

最后需要注意的是，package.json 中的配置必须和配置文件匹配，development 环境和 production 环境使用默认，release 环境为新增，所以需要在 –model 后配置相同名字,名字与配置文件名相同，即为 release

1
2
3
4
5
6
"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "release": "vue-cli-service build --mode release",
    "lint": "vue-cli-service lint"
  },

配置环境变量通过： process.env.xxx 在项目的任意地方获取