创建项目
使用 vue-cli 创建一个项目
$ vue init webpack vue-multiple-demo
登录后复制
根据控制台的提示，填写相关信息即可。创建完成后，进入该项目根目录并安装依赖。
$ cd vue-multiple-demo$ npm install
登录后复制
由于是开发多页面应用，该工程就没有配置 vue-router。
最简示例
通过 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 的内容复制过去。为了区分开来，只编辑下
登录后复制
发布地址
在 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']}),
登录后复制
这里主要有两处改动
filename 直接写死
为防止加载不必要的 js，添加 chunks 配置。
新增
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 的目录结构如下
assets
logo.png
components
HelloWorld.vue
entries
index.js
list.js
templates
index.html
list.html
按照约定
entries 用于存放页面入口的 js 文件
templates 用于存放页面的模板 html 文件
读取目录
为方便读取页面目录，这里使用 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 开发多页面应用的几个关键点。
多入口
多个 HtmlWebpackPlugin
静态资源的路径
此文中介绍的配置，不一定适用于所有的开发场景。优化更多进一步的细节，还是要在实际开发中不断实践。
相关推荐：
vue构建多页面应用实例代码分享
Vue-cli创建单页面到多页面的方法实例代码
vue cli重构多页面脚手架实例分享
以上就是vue-cli开发多页面应用的简单示例的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2785535.html
