問題描述： 手頭有一個項目是使用 vue-cli 搭建的單頁面應用。項目分為了管理平臺和用戶查看頁面，用戶查看頁面是很簡單的頁面，但是在加載過程中，卻加載了整個應用的打包代碼，量重且影響了響應和體驗。我想要的效果是，查看頁面只加載查看頁面的代碼，不包含管理系統的代碼，因此著手將單頁面應用改造成多頁面應用，這里分享下方法。

1、改造文件目錄

改造前：

改造后：

assets：這里不變，依然放置公用的靜態資源文件；components：這里存放應用下所有的vue組件；pages：這里存放我們的多頁面，比如我把管理系統頁面放在index中，查看頁面放在view中；

pages文件：

每個頁面下必須包含的文件是 html/js/vue，是文件入口，如果該頁面下包含路由，狀態管理，接口請求也放在該目錄下；

2、打包配置文件修改

我們最后的打包文件是這樣的，可以看到有2個html，包括資源也分開了。這是通過修改webpack配置改造的。采用的方法也是網上比較推薦的方法.

HTML分離：

資源分離：

2.1 修改build->utils.js

修改build文件夾下的utils.js，直接將下面的代碼復制在后面即可。

var glob = require('glob');

var HtmlWebpackPlugin = require('html-webpack-plugin');

var PAGE_PATH = path.resolve(__dirname, '../src/pages');

var merge = require('webpack-merge');

// 這段代碼的意思是根據我們`pages`下的文件夾定義webpack的入口：

exports.entries = function () {

var entryFiles = glob.sync(PAGE_PATH + '/*/*.js')

var map = {}

entryFiles.forEach((filePath) => {

var filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.'))

map[filename] = filePath

})

return map

}

// 這段代碼是將生成的html，加載對應的資源文件

exports.htmlPlugin = function () {

let entryHtml = glob.sync(PAGE_PATH + '/*/*.html')

let arr = []

entryHtml.forEach((filePath) => {

let filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.'))

let conf = {

// 模板來源

template: filePath,

// 文件名稱

filename: filename + '.html',

// 頁面模板需要加對應的js腳本，如果不加這行則每個頁面都會引入所有的js腳本

chunks: ['manifest', 'vendor', filename],

inject: true

}

if (process.env.NODE_ENV === 'production') {

conf = merge(conf, {

minify: {

removeComments: true,

collapseWhitespace: true,

removeAttributeQuotes: true

},

chunksSortMode: 'dependency'

})

}

arr.push(new HtmlWebpackPlugin(conf))

})

return arr

}

2.2 修改入口entry打開 build->webpack.base.conf.js,替換entry為在utils新增的entries：

2.3 修改html插件打開build->webpack.prod.conf.js,先去除原來的配置：

然后再把我們剛在utils里新增的配置加上：

3、頁面怎么寫

上面的方法，網上五花八門的都介紹了，但是在實現的過程中，還是遇到了問題：這里粘貼下我實踐成功的頁面寫法，減少一些爬坑吧~

view.html：

view.vue：

view.js：

ok，這時候 npm run build 就可以打包出我們要的文件了，訪問方法是直接輸入對應的html，如果是管理首頁，無需寫index.html，比如本地訪問查看頁面：

4、進一步優化

這個時候我們又發現一個問題，就是我的查看頁面很簡單，沒有引入狀態管理，路由，UI框架，但是我們知道vue的webpack把這些第三方公共組件都打包到render.js里面了且文件很大會影響我們的加載速度。這里我是將比較大的第三方庫使用了cdn方法加載，實踐證明會減少了一半的加載速度，且壓縮后的js代碼也小了很多了~

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的vue.js能美化界面吗_vue将单页面改造成多页面应用的方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。