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
三、 安装 shelljs 用来通过js操作文件
 - 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 cli3的配置文件 vue.config.js 这个是不可缺少的
/*
* vue config
* 2019年4月15日 16:23:44
* author [nan1010082085]
* */
//route  //在vue.config.js 被读取时运行写好的配置文件
require('./config')
module.exports = {}

vue.config.js 参考链接

看一下在 router文件中都做了什么
//__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中文文档或是官方文档
五、 最后我们在package.json中 scripts 指定运行环境
"scripts": {
    "serve": "vue-cli-service serve --mode development",
    "build": "vue-cli-service build --mode production"
  },

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券