一步步创建一个vue项目(二)

一步步创建一个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:

在这里插入图片描述
在这里插入图片描述
而且在里面也可以配置端口号。

猜你喜欢

转载自blog.csdn.net/weixin_42645490/article/details/109238833