创建项目
使用 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 的内容复制过去。为了区分开来，只编辑下
的内容。<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><title>demo</title></pre><div class="contentsignin">登录后复制</div></div><h3>发布地址</h3>
<p>在 config/index.js 的 build 配置下，新增一条记录。</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">index: path.resolve(__dirname, '../dist/index.html'),
demo: path.resolve(__dirname, '../dist/demo.html'),</pre><div class="contentsignin">登录后复制</div></div><h3>生产环境配置</h3>
<p>调整 build/webpack.prod.conf.js 的 plugins 中，关于 html 的配置。</p>
<p><strong>修改</strong></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">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']
}),</pre><div class="contentsignin">登录后复制</div></div><p>这里主要有两处改动</p>
<ul class=" list-paddingleft-2">
<li><p>filename 直接写死</p></li>
<li><p>为防止加载不必要的 js，添加 chunks 配置。</p></li>
</ul>
<p><strong>新增</strong></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">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']
}),</pre><div class="contentsignin">登录后复制</div></div><h3>预览效果</h3>
<p>这里不启动本地服务，所以需要修改下静态资源的加载路径，即将 config/index.js 中 build->assetsPublicPath 修改为 ./。</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">assetsPublicPath: './',</pre><div class="contentsignin">登录后复制</div></div><p>构建应用</p><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">$ npm run build</pre><div class="contentsignin">登录后复制</div></div><div class="contentsignin">登录后复制</div></div><p>直接打开 dist 目录中的 html 文件，即可预览效果。</p>
<h3>小结</h3>
<p>至此，开发多页面的最简示例就完成了。</p>
<h2>进一步优化</h2>
<p>实际开发中，页面的数量较多，因而需要批量处理以下配置。</p>
<h3>文件目录</h3>
<p>源码部分 src 的目录结构如下</p>
<ul class=" list-paddingleft-2">
<li><p>assets</p></li>
<ul class=" list-paddingleft-2" style="list-style-type: square;"><li><p>logo.png</p></li></ul>
<li><p>components</p></li>
<ul class=" list-paddingleft-2" style="list-style-type: square;"><li><p>HelloWorld.vue</p></li></ul>
<li><p>entries</p></li>
<ul class=" list-paddingleft-2" style="list-style-type: square;">
<li><p>index.js</p></li>
<li><p>list.js</p></li>
</ul>
<li><p>templates</p></li>
<ul class=" list-paddingleft-2" style="list-style-type: square;">
<li><p>index.html</p></li>
<li><p>list.html</p></li>
</ul>
</ul>
<p>按照约定</p>
<ul class=" list-paddingleft-2">
<li><p>entries 用于存放页面入口的 js 文件</p></li>
<li><p>templates 用于存放页面的模板 html 文件</p></li>
</ul>
<h3>读取目录</h3>
<p>为方便读取页面目录，这里使用 glob 扩展一个方法。</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">$ npm install glob --save-dev</pre><div class="contentsignin">登录后复制</div></div><p>安装完依赖后，在 build/utils.js 中添加方法</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">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;
}</pre><div class="contentsignin">登录后复制</div></div><h3>修改配置</h3>
<h4>build/webpack.base.conf.js</h4><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">entry: utils.getEntries('./src/entries/*.js'),</pre><div class="contentsignin">登录后复制</div></div><h4>build/webpack.base.prod.conf.js</h4>
<p>删除原有的 HtmlWebpackPlugin 相关配置，在文件结束之前遍历添加相关配置即可。</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">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));
}</pre><div class="contentsignin">登录后复制</div></div><h4>config/index.js</h4>
<p>由于输出的地址不在这里配置，之前的删不删除都不影响。但是，调整了目录结构，页面中加载静态资源的路径也要做出调整。</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">assetsPublicPath: '../',</pre><div class="contentsignin">登录后复制</div></div><h3>构建并预览</h3><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">$ npm run build</pre><div class="contentsignin">登录后复制</div></div><div class="contentsignin">登录后复制</div></div><p>构建完成后，直接使用浏览器打开 dist 目录下的 html 文件即可预览效果。</p>
<h2>总结</h2>
<p>简单总结以下，使用 vue-cli 开发多页面应用的几个关键点。</p>
<ul class=" list-paddingleft-2">
<li><p>多入口</p></li>
<li><p>多个 HtmlWebpackPlugin</p></li>
<li><p>静态资源的路径</p></li>
</ul>
<p>此文中介绍的配置，不一定适用于所有的开发场景。优化更多进一步的细节，还是要在实际开发中不断实践。</p>
<p>相关推荐：</p>
<p><a href="http://www.php.cn/js-tutorial-386308.html" target="_self">vue构建多页面应用实例代码分享</a></p>
<p><a href="http://www.php.cn/js-tutorial-386315.html" target="_self">Vue-cli创建单页面到多页面的方法实例代码</a></p>
<p><a href="http://www.php.cn/linux-385562.html" target="_self">vue cli重构多页面脚手架实例分享</a></p>
<p class="article fmt article__content"><br></p>
<p class="comments-box-content"><br></p>
以上就是vue-cli开发多页面应用的简单示例的详细内容，更多请关注php中文网其它相关文章！
广告![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
716
