vue实现多页面应用开发,包含项目之间跳转
需求:在一个vue项目工程下,需要部署两个项目甚至多个项目。实现思路:第一步:在vue.config.js文件中配置两个项目的入口
·
需求:在一个vue项目工程下,需要部署两个项目甚至多个项目。
实现思路:
第一步:在vue.config.js文件中配置两个项目的入口
module.exports = {
pages: {
// index页面是必须的,作为主项目的入口页面
index: {
entry: './src/main.js',
template: './public/index.html'
},
// partner为单独配置的另外一个项目文件入口
partner: {
entry: './src/pages/partner/main.js',
template: './src/pages/partner/partner.html'
}
}
}
第二步:多页面的文件结构
主项目index.html有两种写法:一是,维持单页面应用的文件结构
二是同partner一样,在pages文件夹下再单独创建一个index文件夹,用法往下看。
第二个项目partner是放在pages文件夹 ,有自己独立的路由router,store,views,main.js,app.vue,与主项目完全独立。
运行工程:
单独访问主工程 直接运行:http://localhost:8080
单独访问partner项目,必须http://localhost:8080/partner.html
如果想实现输入http://localhost:8080就可直接访问partner项目,需要在主工程app.vue文件,mounted生命周期设置重定向:
mounted () {
window.location="/partner.html"
},
如果你运行工程发现报了以下错误,莫着急,有可能是vue.config.js文件,pages对象多页面入口路径有问题,仔细检查一下哦
ERROR in multi (webpack)-dev-server/client?http://localhost:8080 ./src
Module not found
更多推荐
已为社区贡献6条内容
所有评论(0)