配置不同环境的打包命令

使用vue-cli3打包项目，可以自己配置不同的命令去运行项目或者打包项目，不同的环境就配置不同的命令； 类如：

npm run serve命令：设置process.env.NODE_ENV = 'development';
npm run bulid命令：设置process.env.NODE_ENV = 'production';

1，先在package.json配置上你自己想要的命令

"scripts": {
	"dev": 'npm run serve',
    "serve": 'vue-cli-serveice serve',
    "build": 'vue-cli-service build', // 本地环境
    "build-test": 'vue-cli-service build --mode test', // 命令1 测试环境
    "build-prod": 'vue-cli-service build $$ vue-cli-service build --mode test', // 命令2 生产环境 并同步本地环境和测试环境
}

"scripts": {
	"serve": 'vue-cli-service serve',
    "build": 'vue-cli-service build',
    "demo": 'vue-cli-service build --mode demo',
    "pord": 'vue-cli-service build --mode prod',
}

2，在项目的根目录下添加3个文件
文件1：.env.demo

NODE_ENV = 'demo' // 测试环境，设置为demo（必设置）
outputDir = demoDist // 打包输出文件夹名，不设置则默认为dist文件夹
VUE_APP_TITLE = 'demo' // 定义全局变量必须以VUE_APP开头
VUE_APP_BASE_API = '/api' 
VUE_APP_BASEURL = 'http://xxx.com' // 配置上限到测试环境的服务地址

文件2：.env.dev

VUE_APP_SERVER_ID = 0
NODE_ENV = 'dev' // 本地运行环境，设置为dev（必设置）
VUE_APP_FLAG = 'dev'
VUE_APP_BASE_API = '/'
VUE_APP_BASEURL = 'http://xxx.com' // 配置上限到本地环境的服务地址

文件3：.env.prod

VUE_APP_SERVER_ID = 1
NODE_ENV = 'prod' // 生产环境，设置为prod（必设置）
VUE_APP_FLAG = 'dev'
VUE_APP_BASE_API = '/'
VUE_APP_BASEURL = 'http://xxx.com' // 配置上限到生产环境的服务地址

** vue.config.js文件的配置 **

const path = require('path')

function resolve(dir) {
	return path.join(__dirname, dir);
}

module.exports = {
	lintOnSave: process.env.NODE_ENV === 'development',
    pages: {
    	app: {},
    },
    dll: [],
    // 打包文件夹的位置,可以设置为'./'
    publicPath: process.env.NODE_ENV === 'development' ? '/' : '/static',
    outputDir: process.env.outputDir || 'static', // 打包输出的文件夹名
    assetsDir: 'static', // 打包静态文件存放的文件夹名
    css: {},
    devServer: {
    	// https: true,
        host: '0.0.0.0',
        port: 8089,
        open: true, // 项目运行自动启动浏览器
        overlay: {
        	warnings: false,
            errors: true,
        },
    	proxy: {
        	// 跨域代理
            // '/api'可以用变量替代，[process.env.VUE_APP_BASE_API]
            // target可以用变量替代，process.env.VUE_APP_BASEURL
          	'/api': {
				target: 'http://112.35.162.232:8089'
                changeOrigin: true,
                secure: false, // 如果是https接口，需要配置这个参数
                pathRewrite: {
                	'/api': '', // 需要rewrite的
                }
          	}
        }
    }，
    chainWebpack: (config) => {
    config.resolve.alias
      .set('@', resolve('src'))
      .set('@assets', resolve('src/assets'))
      .set('@components', resolve('src/components'))
      .set('@layouts', resolve('src/layouts'))
      .set('@views', resolve('src/views'));
    // config.entry('app').clear().add('./src/main.js');
    // config.entry('vendor').clear().add('axios').add('vue');
    config.output
      .filename('[name].[hash].js');
    config.module
      .rule('compile')
      .test(/\.js$/)
      .include
      .add(resolve('node_modules/element-ui/packages'))
      .add(resolve('node_modules/element-ui/src'))
      .end()
      .exclude
      .add(resolve('node_modules/element-ui/src/utils/date.js'))
      .end()
      .use('babel')
      .loader('babel-loader');
    config.optimization.splitChunks({
      chunks: 'all',
      cacheGroups: {
        libs: {
          name: 'chunk-libs',
          test: /[\\/]node_modules[\\/]/,
          priority: 10,
          chunks: 'initial', // only package third parties that are initially dependent
        },
        elementUI: {
          name: 'chunk-elementUI', // split elementUI into a single package
          priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
          test: /[\\/]node_modules[\\/]_?element-ui(.*)/, // in order to adapt to cnpm
        },
        commons: {
          name: 'chunk-commons',
          test: resolve('src/components'), // can customize your rules
          minChunks: 3, //  minimum common number
          priority: 5,
          reuseExistingChunk: true,
        },
      },
    });

  },
}