初始化项目
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"
},