vue-cli 3.0 配置

github网站：vue-cli
官方文档：vue-cli

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 --mode production",
    "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')
const resolve = dir => path.join(__dirname, dir)

module.exports={
	...
	chainWebpack: config => {
	    config.resolve.alias
		    .set('@', resolve('src'))
	},
	...
}

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.安装插件

• terser-webpack-plugin // 去console插件
• compression-webpack-plugin // gzip压缩插件

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

2.vue.config.js配置

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

module.exports={
  ...
  //  webpack插件配置
  configureWebpack: config => {
    const plugins = [
      // 去console
      new TerserPlugin({
        terserOptions: {
          warnings: false,
          compress: {
            drop_debugger: true,
            drop_console: true,
          },
        },
        sourceMap: false,
        parallel: true,
      }),
      // gzip压缩
      new CompressionWebpackPlugin({
        filename: '[path][base].gz',
        algorithm: 'gzip',
        test: new RegExp(
          '\\.(' +
          ['js', 'css'].join('|') +
          ')$',
        ),
        threshold: 10240,
        minRatio: 0.8,
      }),
    ]
    if (process.env.NODE_ENV === 'production') {
      config.plugins = [...config.plugins, ...plugins]
    }
  },
  ...
}

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

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

module.exports = {
	 // 基本路径
	 publicPath: '/',
	 // 输出文件目录
	 outputDir: 'dist',
  	 // 用于嵌套生成的静态资产（js，css，img，fonts）的目录
  	 assetsDir: '',
     // 指定生成的 index.html 的输出路径 (相对于 outputDir)
     indexPath: 'index.html',
	 // 静态资源在它们的文件名中包含了 hash 以便更好的控制缓存
  	 filenameHashing: true,
  	 // 以多页模式构建应用程序。
  	 pages: undefined,
	 // eslint-loader 是否在保存的时候检查
	 lintOnSave: true,
	 // 是否使用包含运行时编译器的Vue核心的构建
	 runtimeCompiler: false,
     // 默认情况下babel-loader忽略其中的所有文件node_modules
     transpileDependencies: [],
     // 生产环境sourceMap
     productionSourceMap: true,
     // 设置生成的 HTML 中 <link rel="stylesheet"> 和 <script> 标签的 crossorigin 属性
     crossorigin: undefined,
     // 在生成的 HTML 中的 <link rel="stylesheet"> 和 <script> 标签上启用 Subresource Integrity (SRI)
     integrity: false,
	 // webpack配置
	 configureWebpack: () => {},
	 chainWebpack: () => {},
	 // css相关配置
	 css: {
	  // 启用 CSS modules
	  modules: false,
	  // 开启 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: {
	  // ...
	 }
}

6. mock访问本地Json文件

可以将json文件放在项目根目录或public文件夹下

vue.config.js中配置如下

const appData = require('./public/data.json')
const seller = appData.seller
const goods = appData.goods
const ratings = appData.ratings

devServer: {
    open: true, // 打开浏览器
    host: '0.0.0.0',
    port: 8080,
    https: false,
    hotOnly: false,
    proxy: null, // 设置代理
    before: app => {
      app.get('/api/seller', (req, res) => {
        res.json({
          status: 1,
          data: seller
        })
      })
      app.get('/api/goods', (req, res) => {
        res.json({
          status: 1,
          data: goods
        })
      })
      app.get('/api/ratings', (req, res) => {
        res.json({
          status: 1,
          data: ratings
        })
      })
    }
  },

7. CDN配置

在开发中我们可以将公共库采用CDN引入的方式减少包体积。

修改vue.config.js文件

module.exports={
	...
	chainWebpack: config => {
	    // externals配置
        const externals = {
          vue: 'Vue',
          'vue-router': 'VueRouter',
          vuex: 'Vuex',
          axios: 'axios',
          moment: 'moment'
        }
        config.externals(externals)
        
        // cdn配置
        const cdnUrl = 'https://cdn.jsdelivr.net/npm/'
        const cdn = {
          // 开发环境
          dev: {
            css: [],
            js: [
              // babel-polyfill
              `${cdnUrl}babel-polyfill@6.26.0/dist/polyfill.js`,
              // vue
              `${cdnUrl}vue@2.6.12/dist/vue.js`,
              // vue-router
              `${cdnUrl}vue-router@3.4.6/dist/vue-router.js`,
              // vuex
              `${cdnUrl}vuex@3.5.1/dist/vuex.js`,
              // axios
              `${cdnUrl}axios@0.20.0/dist/axios.js`,
              // moment
              `${cdnUrl}moment@2.29.1/moment.js`,
              `${cdnUrl}moment@2.29.1/locale/zh-cn.js`
            ]
          },
          // 生产环境
          build: {
            css: [],
            js: [
              // babel-polyfill
              `${cdnUrl}babel-polyfill@6.26.0/dist/polyfill.min.js`,
              // vue
              `${cdnUrl}vue@2.6.12/dist/vue.min.js`,
              // vue-router
              `${cdnUrl}vue-router@3.4.6/dist/vue-router.min.js`,
              // vuex
              `${cdnUrl}vuex@3.5.1/dist/vuex.min.js`,
              // axios
              `${cdnUrl}axios@0.20.0/dist/axios.min.js`,
              // moment
              `${cdnUrl}moment@2.29.1/moment.min.js`,
              `${cdnUrl}moment@2.29.1/locale/zh-cn.min.js`
            ]
          }
        }

        config.plugin('html').tap(args => {
          if (process.env.NODE_ENV === 'production') {
            args[0].cdn = cdn.build
          }
          if (process.env.NODE_ENV === 'development') {
            args[0].cdn = cdn.dev
          }
          return args
        })
	},
	...
}

修改public下index.html

<head>
    ...
    <% for (var i in htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.css) { %>
    <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="preload" as="style">
    <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="stylesheet">
    <% } %>
    <% for (var i in htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.js) { %>
    <link href="<%= htmlWebpackPlugin.options.cdn.js[i] %>" rel="preload" as="script">
    <% } %>
</head>
<body>
    ...
    <% for (var i in htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.js) { %>
    <script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
    <% } %>
</body>

以上CDN使用的是jsDeliver的CDN

需要注意的是本地开发环境中使用的版本与正式环境的版本需要保持一致，可以查看package.json和yarn.lock中对应的版本号