vue-cli 3.x 搭建的项目配置多页面
main页面
1、在项目src文件夹下,创建一个pages文件夹,用来新建多页面的各个入口文件
(1)配置index页面,文件写在src/pages/index文件夹下,在浏览器中访问地址http://localhost:8090/index.html#/:
src/pages/index/index.html
index页面
src/pages/index/index.js
import Vue from 'vue';
import App from './index.vue';
import router from 'router/indexRoutes.js';
Vue.config.productionTip = false
new Vue({
render: h => h(App),
router
}).$mount('#app')
src/pages/index/index.vue
vue-cli 3.x 搭建的项目配置多页面
index页面
(2)配置main页面,文件写在src/pages/main文件夹下,在浏览器中访问地址http://localhost:8090/main.html#/:
src/pages/main/main.html
main页面
src/pages/main/main.js
import Vue from 'vue';
import App from './main.vue';
import router from 'router/mainRoutes.js';
Vue.config.productionTip = false
new Vue({
render: h => h(App),
router
}).$mount('#app')
src/pages/main/main.vue
vue-cli 3.x 搭建的项目配置多页面
main页面
2、在vue.config.js文件中设置多页面入口
const path = require('path');
module.exports = {
// 配置多页面入口
pages: {
index: {
// page 的入口
entry: 'src/pages/index/index.js',
// 模板来源
template: 'src/pages/index/index.html',
// 在 dist/index.html 的输出
filename: 'index.html',
// 当使用 title 选项时,
// template 中的 title 标签需要是 <%= htmlWebpackPlugin.options.title %>
title: 'Index Page',
// 在这个页面中包含的块,默认情况下会包含
// 提取出来的通用 chunk 和 vendor chunk。
chunks: ['chunk-vendors', 'chunk-common', 'index']
},
main: {
// page 的入口
entry: 'src/pages/main/main.js',
// 模板来源
template: 'src/pages/main/main.html',
// 在 dist/main.html 的输出
filename: 'main.html',
// 当使用 title 选项时,
// template 中的 title 标签需要是 <%= htmlWebpackPlugin.options.title %>
title: 'Main Page',
// 在这个页面中包含的块,默认情况下会包含
// 提取出来的通用 chunk 和 vendor chunk。
chunks: ['chunk-vendors', 'chunk-common', 'main']
}
},
// 环境配置
devServer: {
host: '0.0.0.0',
port: '8090',
https: false,
open: true
},
// 设置路径别名
chainWebpack: config => {
config.resolve.alias
.set('@', path.join(__dirname, 'src'))
.set('assets', path.join(__dirname, 'src/assets'))
.set('components', path.join(__dirname, 'src/components'))
.set('request', path.join(__dirname, 'src/request'))
.set('router', path.join(__dirname, 'src/router'))
.set('utils', path.join(__dirname, 'src/utils'))
.set('views', path.join(__dirname, 'src/views'))
}
};
3、删除文件public/index.html 、src/App.vue 、src/main.js