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",
    "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({
        filename: '[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 = {
	 // 基本路径
	 publicPath: '/',
	 // 输出文件目录
	 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 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
        })
      })
    }
  },

未完待续…