Vue-cli 脚手架生成的是单页面模式(SPA)，发现做微信支付的单页面调用会有问题，支付完成回调返回不了之前的充值页面，所以把单页面模式进行了改造步骤看图：

1、安装vue-cli

输入命令

$ npm install -g vue-cli

使用vue init <template><webpack> <project>初始化一个Vue项目模板

$ vue init <template-name> <project-name>(项目名称任意)

vue init webpack CharginPileWebVue(项目名称)

vue-cli生成单页面模式

2、项目中的src进行整改

在src目录下新建个文件取名为pages在新建好的pages里面新建文件夹角index 把src同级目录index.html拖拽进去,再把src下的 router文件夹、App.vue、main.js拖拽到index文件夹中顺便 把刚才的main.js改名为index.js

结构调整前

结构调整后

3、配置文件修改

在build文件夹下修改 utils.js、webpack.base.conf.js、webpack.dev.conf.js、webpack.prod.conf.js

utils.js

添加两个方法

webpack.base.conf.js

把之前的 entry:{app:'./src/main.js'} 修改为:utils.entries()

webpack.dev.conf.js

把这一段删掉

在后面加上

webpack.prod.conf.js

在plugins修改

删除或者注释掉这一段

然后添加

步骤配置文件完成接下来在pages下新建个文件夹叫login 启动服务访问下login文件夹中的login.html

以上就是多页面的配置。

喜欢的小伙伴点击收藏或者关注，谢谢。