首先是vue.config.js--主要是在module.exports中加入pages的配置(最重要的一点):
module.exports = {
pages: {
index: {
// page 的入口
entry: "src/views/index/main.js",
// 模板来源
template: "public/index.html",
// 在 dist/index.html 的输出
filename: "index.html",
// 当使用 title 选项时,
// template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
title: "Index Page",
// 在这个页面中包含的块,默认情况下会包含
// 提取出来的通用 chunk 和 vendor chunk。
chunks: ["chunk-vendors", "chunk-common", "index"]
},
ui: {
// page 的入口
entry: "src/views/ui/main.js",
// 模板来源
template: "public/ui.html",
// 在 dist/index.html 的输出
filename: "ui.html",
// 当使用 title 选项时,
// template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
title: "Index Page",
// 在这个页面中包含的块,默认情况下会包含
// 提取出来的通用 chunk 和 vendor chunk。
chunks: ["chunk-vendors", "chunk-common", "ui"]
},
// 当使用只有入口的字符串格式时,
// 模板会被推导为 `public/subpage.html`
// 并且如果找不到的话,就回退到 `public/index.html`。
// 输出文件名会被推导为 `subpage.html`。
subpage: "src/subpage/main.js"
}
}
2.按照上面的目录结构,在src下面新建目录和文件,index和ui的写法就像一个小型的单页面vue一样,可以单独写main.js,App.vue,router,vuex,filter等
重要的是不要忘了在public目录下把html文件新建一下,为了方便理解,html的div=>id都是app
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>xeleme</title>
</head>
<body>
<noscript>
<strong>We're sorry but xeleme doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// import '@/assets/style/reset.css'
import VueI18n from 'vue-i18n'
Vue.use(VueI18n) // 通过插件的形式挂载
const i18n = new VueI18n({
locale: 'en-US', // 语言标识
//this.$i18n.locale // 通过切换locale的值来实现语言切换
messages: {
'zh-CN': require('@/common/lang/zh'), // 中文语言包
'en-US': require('@/common/lang/en') // 英文语言包
}
})
Vue.config.productionTip = false
new Vue({
router,
store,
i18n,
render: h => h(App)
}).$mount('#app')
router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router';
Vue.use(VueRouter);
const router = new VueRouter({
mode: 'hash',
routes: [
{
path: '/a',
name: 'a',
component:()=>import('../components/a.vue'),
children:[
{
path: '12',
component:()=>import('../components/aa.vue')
}
]
}
]
});
export default router;
store/index.js
// 组装模块并导出 store 的地方
import Vue from 'vue'
import Vuex from 'vuex'
import loading from './modules/loading'
Vue.use(Vuex)
export default new Vuex.Store({
modules: {
loading,
},
strict: process.env.NODE_ENV !== 'production' // 严格模式
})
如果对vue3不清楚的可以查看这个博客:https://www.cnblogs.com/guiltyWay/p/10320653.html