vue-cli开发多页面应用的简单示例

最简示例

通过 vue-cli 创建的项目，默认是开发单页应用。如果希望开发多页面，需要调整部分脚本的配置。

入口

在 src 目录下新建一个 demo.js，为方便起见，直接将 main.js 中的内容复制过去。然后，修改 build/webpack.base.conf.js 的 entry 为多个。

entry: {
 app: './src/main.js',
 demo: './src/demo.js'
},

模板

在工程根目录下新建一个 demo.html 文件，同样将 index.html 的内容复制过去。为了区分开来，只编辑下 <title> 的内容。

<title>demo</title>

发布地址

在 config/index.js 的 build 配置下，新增一条记录。

index: path.resolve(__dirname, '../dist/index.html'),
demo: path.resolve(__dirname, '../dist/demo.html'),

生产环境配置

调整 build/webpack.prod.conf.js 的 plugins 中，关于 html 的配置。

修改

new HtmlWebpackPlugin({
 filename: config.build.index,
 template: 'index.html',
 inject: true,
 minify: {
 removeComments: true,
 collapseWhitespace: true,
 removeAttributeQuotes: true
 // more options:
 // https://github.com/kangax/html-minifier#options-quick-reference
 },
 // necessary to consistently work with multiple chunks via CommonsChunkPlugin
 chunksSortMode: 'dependency',
 chunks: ['manifest', 'vendor', 'app']
}),

这里主要有两处改动

新增

new HtmlWebpackPlugin({
 filename: config.build.demo,
 template: 'demo.html',
 inject: true,
 minify: {
 removeComments: true,
 collapseWhitespace: true,
 removeAttributeQuotes: true
 // more options:
 // https://github.com/kangax/html-minifier#options-quick-reference
 },
 // necessary to consistently work with multiple chunks via CommonsChunkPlugin
 chunksSortMode: 'dependency',
 thunks: ['manifest', 'vendor', 'demo']
}),

预览效果

这里不启动本地服务，所以需要修改下静态资源的加载路径，即将 config/index.js 中 build->assetsPublicPath 修改为 ./。

assetsPublicPath: './',

构建应用

$ npm run build

直接打开 dist 目录中的 html 文件，即可预览效果。

小结

至此，开发多页面的最简示例就完成了。

进一步优化

实际开发中，页面的数量较多，因而需要批量处理以下配置。

文件目录

源码部分 src 的目录结构如下

按照约定

读取目录

为方便读取页面目录，这里使用 glob 扩展一个方法。

$ npm install glob --save-dev

安装完依赖后，在 build/utils.js 中添加方法

const glob = require('glob')

// 遍历指定目录下的文件
exports.getEntries = (dirPath) => {
 let filePaths = glob.sync(dirPath);
 let entries = {};
 filePaths.forEach(filePath => {
 let filename = filePath.match(/(\w+)\.[html|js]+/)[1];
 entries[filename] = filePath;
 })
 return entries;
}

修改配置

build/webpack.base.conf.js

entry: utils.getEntries('./src/entries/*.js'),

build/webpack.base.prod.conf.js

删除原有的 HtmlWebpackPlugin 相关配置，在文件结束之前遍历添加相关配置即可。

const pages = utils.getEntries('./src/templates/*.html');
for(let page in pages) {
 let fileConfig = {
 filename: path.resolve(__dirname, '../dist/pages/' + page + '.html'),
 template: pages[page],
 inject: true,
 minify: {
 removeComments: true,
 collapseWhitespace: true,
 removeAttributeQuotes: true
 },
 chunksSortMode: 'dependency',
 thunks: ['manifest', 'vendor']
 };
 fileConfig.thunks.push(page);
 // 添加插件配置
 webpackConfig.plugins.push(new HtmlWebpackPlugin(fileConfig));
}

config/index.js

由于输出的地址不在这里配置，之前的删不删除都不影响。但是，调整了目录结构，页面中加载静态资源的路径也要做出调整。

assetsPublicPath: '../',

构建并预览

$ npm run build

构建完成后，直接使用浏览器打开 dist 目录下的 html 文件即可预览效果。

总结

简单总结以下，使用 vue-cli 开发多页面应用的几个关键点。

此文中介绍的配置，不一定适用于所有的开发场景。优化更多进一步的细节，还是要在实际开发中不断实践。