场景，公司的一个小型项目，需同时支持移动端和PC端。最开始考虑做两个独立的项目。但后来考虑到总共只有4个功能页面，布署起来相对麻烦。所以决定做在一个项目里。
1、升级vue-cli到4.x
npm install -g @vue/cli
2、项目创建
vue create multipage
项目配置不做描述，这里选了node_sass, babel, router, vuex
3、安装element-ui和mint-ui
npm install element-ui
npm install mint-ui
4、配置按需引入。
借助 babel-plugin-component，我们可以只引入需要的组件，以达到打包项目体积的目的。
然后，将 .babelrc 修改为：
module.exports = {
"presets": [
'@vue/cli-plugin-babel/preset'
],
"plugins": [
[
"component",
{
"libraryName": "mint-ui",
"style": true
},
"mint-ui"
],
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk",
"style": true
},
"element-ui"
],
]
}
5、安装axios
npm install axios
6、新建移动端和PC端模板页面。
移动端：public/mobile.html
pc端：public/pc.html
7、删除多余目录和文件，新建移动端目录（src/mobile）和PC端目录(src/pc)
新建移动端入口页（src/mobile/main.js）和首页(src/mobile/index.vue)
8、新建vue.config.js，添加多页面设置：
module.exports = {
pages: {
mobile: {
// page 的入口
entry: "src/mobile/main.js",
// 模板来源
template: "public/mobile.html",
// 在 dist/index.html 的输出
filename: "mobile/index.html",
// 当使用 title 选项时，
// template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
title: "Index Page",
// 在这个页面中包含的块，默认情况下会包含
// 提取出来的通用 chunk 和 vendor chunk。
chunks: ["chunk-vendors", "chunk-common", "mobile"]
},
pc: {
// page 的入口
entry: "src/pc/main.js",
// 模板来源
template: "public/pc.html",
// 在 dist/index.html 的输出
filename: "pc/index.html",
// 当使用 title 选项时，
// template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
title: "Index Page",
// 在这个页面中包含的块，默认情况下会包含
// 提取出来的通用 chunk 和 vendor chunk。
chunks: ["chunk-vendors", "chunk-common", "pc"]
},
}
}
9、查看打包大小：
npm run build
可以看到chunk-vendors.xxx.js大小只有164.32kiB,如果mobile.xxx.js和mobile_index.js做得好，整个项目首次加载应该是超快的。
10、运行项目
npm run serve
提示如下：
App running at:
- Local: http://localhost:8080/
- Network: http://192.168.2.182:8080/
移动端访问方法：http://localhost:8080/mobile/
PC端访问方法：http://localhost:8080/pc/
以上路径可以在vue.config.js中修改。
全剧终。
代码可以在以下地址可以下载：
https://github.com/gavinjzx/multipage
