vue cli3 开发环境与生产环境配置（一）

vue create vue-asgisn

cd vue-asgisn
npm run serve

 - store  //如果用到vuex 此文件用来维护状态
 - router //路由的一些配置
 - utils //一些公共方法等
 - api //接口api之类

 - 新增文件
  .env.development  开发环境变量
  .env.production 生产环境变量
 - 在其中我们写一个用于判断的变量
   VUE_APP_NODESHL=DEV

 - npm i shelljs -D //安装到开发环境中等同于 npm install shelljs --save-dev
 - 新增config.js
 //代码如下
	var shell =  require('shelljs')
	console.log("environment variables is", process.env.VUE_APP_NODESHL)
	shell.rm('-rf',['./dist','./dist.*']);
	//路由
	if (process.env.VUE_APP_NODESHL === 'PROD') {
		shell.cp('-R', './src/router/__import_prod.js', './src/router/index.js')
	}else {
		shell.cp('-R', './src/router/__import_dev.js', './src/router/index.js')
	}

/*
* vue config
* 2019年4月15日 16:23:44
* author [nan1010082085]
* */
//route  //在vue.config.js 被读取时运行写好的配置文件
require('./config')
module.exports = {}

//__import_dev.js
//将所有引入文件打包成一个js
	const _import = (file) => import(
		/* webpackChunkName: "all-i18n-data" */
		/* webpackMode: "lazy-once" */
		`../views/${file}`
		)
	
	export default _import
	
//__import_prod.js
//懒加载，根据文件路径，将 views/下不同文件打包成不同的js 
	const _import = (file) => import(
		/* webpackChunkName: "[request]" */
		`../views/${file}`
		)
	
	export default _import
	
ps: 分别在开发与生产两个环境中给出了不同的文件引入方式 通过shelljs copy 到 router/index 中
	此处参考webpack中文文档或是官方文档

"scripts": {
    "serve": "vue-cli-service serve --mode development",
    "build": "vue-cli-service build --mode production"
  },