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 = {}
vue.config.js 参考链接
//__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"
},