问题描述：手头的一个项目是使用vue-cli构建的单页应用程序。项目分为管理平台和用户查看页面。用户查看页面是一个简单的页面，但是在加载过程中，加载了整个应用的包代码，比较重，影响了响应和体验。我想要的效果是查看页面只加载查看页面的代码，不包含管理系统的代码，所以我开始把单页应用转化为多页应用，这里分享一下方法。

1、转换文件目录

转换前：

改造后：

资产：此处不变，仍放置公共静态资源文件；组件：应用下的所有vue组件都存储在这里；页面：我们在这里存储我们的多个页面。比如我把管理系统页面放在索引里，把查看页面放在视图里；

页面文件：

每个页面下必须包含的文件是html/js/vue，这是文件条目。如果页面包含路由、状态管理和接口请求，它也会被放在这个目录下。

2.包配置文件修改

我们最终打包的文件是这样的。您可以看到有两个html，包括资源。这可以通过修改webpack配置来修改。使用的方法也是网上推荐的方法。HTML分隔：

资源分离：

2.1修改构建实用程序

在build文件夹下修改utils.js，并在后面直接复制下面的代码。

var glob=require(' glob ')；var HTMlWebPackplugin=require(' HTMl-web pack-plugin ')；var PAGE _ PATH=PATH . resolve(_ _ dirname，'./src/pages ')；var merge=require(' web pack-merge ')；//这个代码的意思是根据我们的‘pages’下的文件夹定义webpack的入口：exports . entries=function(){ var entry files=glob . sync(page _ path)/*/*。js ')var map={ } entryfiles . foreach((filePath)={ var filename=filePath . substring(filePath . last indexof(' /')1，filepath.lastindexoff('。))map[filename]=file path })return map }//这个代码就是要生成的html。加载相应的资源文件exports.html plugin=function(){ let entry html=glob . sync(page _ path)/*/*。html ')let arr=[]entry html . foreach((文件路径))={ let filename=file path . substring(filepath.lastindexof(/')1，file path . last indexof('。))让conf={//模板源template: filePath，//文件名为filename : filename’。html。//页面模板需要添加相应的js脚本。如果不添加这一行，所有js脚本chunks3360 ['manifest '，' vendor '，filename]将被引入到每个页面中。inject : true } if(process . ENV . node _ ENV==' production '){ conf=merge(conf，{ minify : { removecomments : true，collapseWhitespace: true，removeAttributeQuotes: true }，chunkssortmode 3360 ' dependency ' })} arr . push(new html webpackkplugin(conf))})return arr } 2.2修改条目，打开build-webpack.base.conf.js。

2.3修改html插件并打开build-webpack.prod.conf.js，首先删除原来的配置：

然后添加我们刚刚在utils中添加的配置：

3.如何书写页面

以上的方法在网上已经有多种介绍了，但是在实施的过程中还是存在问题：把我在这里成功练习过的页面书写粘贴，减少一些爬坑~

view.html:

view.vue:

view.js:

好了，这时候，npm运行build就可以打包我们想要的文件了。访问方法是直接输入对应的html。如果是管理主页，就不需要写index.html了，比如本地访问页面：

4.进一步优化

这时我们发现了另一个问题，那就是我的查看页面非常简单，没有引入状态管理、路由和UI框架，但是我们知道vue的webpack已经将这些第三方公共组件打包成了render.js，文件会很大程度上影响我们的加载速度。在这里，我使用cdn方法加载了一个相对较大的第三方库。实践证明，加载速度会降低一半，压缩后的js代码要小很多~