vue將單頁面改造成多頁面應(yīng)用的方法

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

創(chuàng)新互聯(lián)的客戶來自各行各業(yè)，為了共同目標(biāo)，我們?cè)诠ぷ魃厦芮信浜?，從?chuàng)業(yè)型小企業(yè)到企事業(yè)單位，感謝他們對(duì)我們的要求，感謝他們從不同領(lǐng)域給我們帶來的挑戰(zhàn)，讓我們激情的團(tuán)隊(duì)有機(jī)會(huì)用頭腦與智慧不斷的給客戶帶來驚喜。專業(yè)領(lǐng)域包括成都網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)、電商網(wǎng)站開發(fā)、微信營(yíng)銷、系統(tǒng)平臺(tái)開發(fā)。

1、改造文件目錄

改造前：

改造后：

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

pages文件：

每個(gè)頁面下必須包含的文件是 html/js/vue，是文件入口，如果該頁面下包含路由，狀態(tài)管理，接口請(qǐng)求也放在該目錄下；

2、打包配置文件修改

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

資源分離：

2.1 修改build->utils.js

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

var glob = require('glob');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var PAGE_PATH = path.resolve(__dirname, '../src/pages');
var merge = require('webpack-merge');
// 這段代碼的意思是根據(jù)我們`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，加載對(duì)應(yīng)的資源文件
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',
     // 頁面模板需要加對(duì)應(yīng)的js腳本，如果不加這行則每個(gè)頁面都會(huì)引入所有的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、頁面怎么寫

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

view.html：

view.vue：

view.js：

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

4、進(jìn)一步優(yōu)化

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

本文題目：vue將單頁面改造成多頁面應(yīng)用的方法
當(dāng)前路徑：http://muchs.cn/article26/igeocg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供軟件開發(fā)、品牌網(wǎng)站建設(shè)、微信小程序、App開發(fā)、域名注冊(cè)、動(dòng)態(tài)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)