使用 Vue Cli 实现多页应用
2012 年 11 月 5 日
如何在 Vue Cli
下实现 多入口
的 Web App
快速配置
Cli
创建了一个 Vue 项目
之后
可以通过 vue.config.js
对项目进行配置
在 vue.config.js
里增加一个叫 pages
的项
module.exports = { pages: { index: 'src/main.js', another: 'src/another/main.js' } }
上述代码中,除了默认就有的 src/main.js
入口文件,我们又增加了 another/main.js
入口文件
这就是 实现多页应用
最简单的配置方式了
当然,我们可以组织一下项目结构,将不同的页面归入 src/pages
的目录下,以便维护以后可能出现的更多的 pages
module.exports = { pages: { index: 'src/pages/index/main.js', // 文件中的引用路径也要有相应的修改 another: 'src/apges/another/main.js' } }
配置细节
上面的方式只是简单的配置了一下不同的 入口 js
文件的路径
除此之外,还可以对每个入口的细节进行配置,比如: 模板来源
、 输出名称
、 title
、 页面中包含的块
如 Vue Cli
文档里的示例代码:
module.exports = { pages: { index: { // page 的入口 entry: 'src/index/main.js', // 模板来源 template: 'public/index.html', // 在 dist/index.html 的输出 filename: 'index.html', // 当使用 title 选项时, // template 中的 title 标签需要是title: 'Index Page', // 在这个页面中包含的块,默认情况下会包含 // 提取出来的通用 chunk 和 vendor chunk。 chunks: ['chunk-vendors', 'chunk-common', 'index'] }, // 当使用只有入口的字符串格式时, // 模板会被推导为 `public/subpage.html` // 并且如果找不到的话,就回退到 `public/index.html`。 // 输出文件名会被推导为 `subpage.html`。 subpage: 'src/subpage/main.js' } }
运行项目
将项目在本地跑起来之后,默认的根路径是指向了 index
这个入口
想要去到其他入口的话,可以将浏览器中的地址改为对应入口的 html
比如: localhost:3001/another.html