一步步创建一个vue项目(二)
配置路由
首先是router/index.js文件,通常是这个样子的:
使用cross-env和_import
如果路由不多的话不需要使用这个。
如果页面太多的话每次引入一个页面都需要写一个import … from …,所以这里使用了:const _import = require('./_import_' + process.env.NODE_ENV)
,这样遇到需要引入的页面时只需要这样写:
直接使用_import(‘文件夹名/文件名’)就可以了,process.env是读取系统环境变量的,比如你在启动服务的时候,设置环境变量为production或者development,那么在程序里面就可以通过process.env.NODE_ENV获取,所以还需要两个文件:
里面分别写:
*_production.js: module.exports = file => () => import('@/pages/' + file + '.vue')
*_develope.js: module.exports = file => import('@/pages/' + file + '.vue')
此时还需要安装一个cross-env来配置环境,在终端输入npm install --save-dev cross-env
安装,之后会出现一个文件夹:
这个dev和prod就是两个不同的环境,在index里面配置path:
而且在里面也可以配置端口号。