首先 使用vue脚手架开发多页应用是比较特别的需求,无奈有需求就要有解决的方案办法,之前写过用vue-cli2.x改造生产多页应用的方法,现在想想应该升级换代了。
本想自己配置一个多页的开发配置给大家参考使用,看完源码后发现@vue/cli#3.x已经自带了多页配置了。而且配置简单方便包你一学就会。
npm install -g @vue/cli
# ......等待
vue create <project-name>
# 或者你也可以使用我已经配置好的
init https://github.com/advsets/vue-multi-page.git <project-name>
# ......基础选项配置,等待安装包内容
首先安装 glob 包, 学习glob
npm install --save-dev glob
@vue/cli#3.x 文档 配置 vue.config.js
const fs = require('fs')
const glob = require("glob")
// 简单学习 glob https://www.cnblogs.com/liulangmao/p/4552339.html
const pages = {}
let entries
try {
// 获取相关入口
entries = glob('src/pages/*/main.js', {sync: true})
} catch (err) {
entries = []
throw err
}
// 格式化生成入口
entries.forEach((file) => {
const fileSplit = file.split('/')
const pageName = fileSplit[2]
let pageHtml = fileSplit.slice(0, 3).join('/') + '/index.html'
if (!fs.existsSync(pageHtml)) {
// 入口如果不配置直接使用 _default.html
pageHtml = fileSplit.slice(0, 2).join('/') + '/_default.html'
}
pages[pageName] = {
entry: file,
template: pageHtml,
filename: `${pageName}.html`
}
})
module.exports = {
pages,
... // ... 其他配置
}
- 每个多页入口单独使用 router,store 等 牢记
- 公共组件不应涉及业务操作,如router-link,store 操作等
- 页面访问 http[s]://localhost/[pages].html (如果有index模块服务器会自动定位index.html)
- 每个单页其实就是一个独立的模块,你可以视作每个单页都是一个vue项目,只是使用了公共的 components