首頁 web前端 js教程 vue+cli單頁面鷹架轉換多頁面鷹架的方法

vue+cli單頁面鷹架轉換多頁面鷹架的方法

Apr 13, 2018 am 11:34 AM
鷹架 轉換

這次帶給大家vue cli單頁面腳手架轉換多頁面腳手架的方法,vue cli單頁面腳手架轉換多頁面腳手架的注意事項有哪些,下面就是實戰案例,一起來看一下。

官方提供的專案產生工具vue-cli沒有對多頁面webApp的支持,但是在實際的專案中,我們需要這樣的腳手架,參考了很多大牛的方法,這裡提供了一種我的單頁腳手架轉換為多頁腳手架的方案,供大家參考。不好的地方也請大家指正。

準備

使用vue-cli產生一個你需要的單頁專案鷹架,然後我們就要開始我們的改裝工程了。

重構過程

步驟一 改變目錄結構

# step1 在src目錄下面新建views資料夾,然後再views資料夾下新建index資料夾

# step2 將src目錄下的main.js和App.vue移到step1中的index資料夾下,並將main.js重新命名為index.

step3 將src目錄下的router資料夾移到step1中的index資料夾下,如果不使用router可以再index.js中註解掉,我沒有使用,因為我的每個頁面不是單一頁面的應用,不必要使用路由功能

# step4 將根目錄下的index.html檔案移到step1中的index資料夾下

# 步驟二 修改build下的設定檔

在生產環境下會分頁面打包獨有js文件,並抽取公共js,不會什麼都打包成一坨。打包後檔案目錄結構也是比較清晰。一下所有修改都在build資料夾下

step1 修改utils.js,增加兩個函數,一個用來取得頁面多入口,一個用來輸入打包後的頁面,並註入js:

var glob = require('glob')
var HtmlWebpackPlugin = require('html-webpack-plugin')
var PAGE_PATH = path.resolve(dirname, '../src/views')
var merge = require('webpack-merge')
//多入口配置
//获取views文件夹下,每个页面下的index.js作为页面入口,故每个页面下都必须有index.js
exports.entries = function() {
 var entryFiles = glob.sync(PAGE_PATH + '/*/index.js')
 var map = {}, tmp = [], pathname = '';
 entryFiles.forEach((filePath) => {
 var filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.'))
 tmp = filePath.split('/').splice(-4)
 map[tmp[2] + '/' + filename] = filePath
 })
 return map
}
//多页面输出配置
//读取views文件夹下的对应每个页面的html后缀文件,然后放入数组中
//如果想要更深的定制或者修改,建议大家看一下CommonsChunkPlugin
//推荐一个基础的 https://segmentfault.com/q/1010000009070061
exports.htmlPlugin = function() {
 let entryHtml = glob.sync(PAGE_PATH + '/*/*.html')
 let arr = []
 entryHtml.forEach((filePath) => {
 let jsPath = '', tmp = [];
 let filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.'))
 tmp = filePath.split('/').splice(-4)
 jsPath = tmp[2] + '/' + 'index'
 let conf = {
  template: filePath,
  filename: filename + '.html',
  chunks: ['manifest', 'vendors', jsPath],
  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
}
step2 修改webpack.base.conf.js文件配置的入口
// entry: {
// app: './src/main.js'
// },
entry: utils.entries(),
step3 修改webpack.dev.conf.js文件的打包方法 找到下面的代码,将其注释掉:
new HtmlWebpackPlugin({
 filename: 'index.html',
 template: 'index.html',
 inject: true
}),
登入後複製

在plugins這個屬性值的後面加上我們上面的方法,下面是程式碼片段:

// new HtmlWebpackPlugin({
 // filename: 'index.html',
 // template: 'index.html',
 // inject: true
 // }),
 new FriendlyErrorsPlugin()
 ].concat(utils.htmlPlugin())
step4 修改webpack.prod.conf.js 找到下面的代码,注释掉:
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'
}),
登入後複製

在plugins這個屬性值的後面加上我們上面的方法,下面是程式碼片段:

new CopyWebpackPlugin([{
  from: path.resolve(dirname, '../static'),
  to: config.build.assetsSubDirectory,
  ignore: ['.*']
 }])
 ].concat(utils.htmlPlugin())
登入後複製

配置完成。正常啟動專案即可。

相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!

推薦閱讀:

JS操作物件透明度的步奏詳解

#vue路由在history模式下刷新時渲染頁面無反映的處理方法

以上是vue+cli單頁面鷹架轉換多頁面鷹架的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Java教學
1653
14
CakePHP 教程
1413
52
Laravel 教程
1304
25
PHP教程
1251
29
C# 教程
1224
24
USDT ERC20轉換為TRC20的簡易指南 USDT ERC20轉換為TRC20的簡易指南 Jan 18, 2024 pm 06:09 PM

我們逐步教您如何將USDTERC20轉換為TRC20網路。這是因為許多人喜歡將USDT穩定幣從以太坊網路轉移到Tron網絡,以節省交易費用。因此,如果您想將您的ERC-20代幣轉換為TRC-20,相信本教學會對您有所幫助。 ERC-20和TRC-20的區別ERC-20代幣和TRC-20代幣分別代表基於以太坊網路和Tron網路的代幣。這兩個網路之間存在一些差異,主要表現在以下方面:首先,以太坊網路常常面臨擁塞和高昂的汽油費問題,這可能導致交易延遲和高昂的交易成本。相較之下,Tron網路則相對壅塞較少

全角英文字母轉換為半角形式的實用技巧 全角英文字母轉換為半角形式的實用技巧 Mar 26, 2024 am 09:54 AM

全角英文字母轉換為半角形式的實用技巧在現代生活中,我們經常會接觸到英文字母,在使用電腦、手機等設備時也經常需要輸入英文字母。然而,有時候我們會遇到全角英文字母的情況,而我們需要使用的是半角形式。那麼,如何將全角英文字母轉換為半角形式呢?以下就為大家介紹一些實用的技巧。首先,全角英文字母和數字是指在輸入法中佔據一個全角位置的字符,而半角英文字母和數字則是佔據一

如何將AI檔案轉換為CDR格式 如何將AI檔案轉換為CDR格式 Feb 19, 2024 pm 04:09 PM

AI檔案指的是AdobeIllustrator(簡稱AI)軟體所建立的向量圖形文件,而CDR檔案指的是CorelDRAW軟體所建立的向量圖形檔。由於這兩個軟體屬於不同的廠商開發,因此它們的文件格式不同,無法直接相互轉換。然而,我們可以透過一些方法將AI檔案轉換為CDR檔案。以下將介紹一種常用的轉換方法。步驟一:匯出AI檔案為EPS格式AdobeIllust

Golang時間處理:如何在Golang中將時間戳轉換為字串 Golang時間處理:如何在Golang中將時間戳轉換為字串 Feb 24, 2024 pm 10:42 PM

Golang時間轉換:如何將時間戳轉換為字串在Golang中,時間操作是非常常見的操作之一。有時候我們需要將時間戳記轉換為字串,以便於展示或儲存。本文將介紹如何使用Golang將時間戳轉換為字串,並提供具體的程式碼範例。 1.時間戳和字串的轉換在Golang中,時間戳通常是以整數數字的形式表示的,表示的是從1970年1月1日至當前時間的秒數。而字串則

如何將虛擬機器轉換為實體機器? 如何將虛擬機器轉換為實體機器? Feb 19, 2024 am 11:40 AM

將虛擬機器(VM)轉換為實體機器是一種將虛擬實例和關聯的應用軟體遷移到實體硬體平台的過程。這種轉換有助於優化作業系統的效能和硬體資源利用。本文旨在深入探討如何進行這種轉換。如何實現從虛擬機器到實體機器的遷移?通常,虛擬機器與實體機之間的轉換過程由第三方軟體在虛擬機器外部執行。這個過程包括多個階段,涉及虛擬機器的配置和資源轉移。準備實體機器:第一步是確保實體機符合Windows的硬體需求。我們需要在實體機上備份數據,因為轉換過程將覆蓋現有數據。 *管理員帳戶的使用者名稱和密碼,具有建立系統映像的管理員權限。將虛擬

如何在Windows 11/10中將ODT轉換為Word? 如何在Windows 11/10中將ODT轉換為Word? Feb 20, 2024 pm 12:21 PM

在這篇文章中,我們將向您展示如何將OpenDocumentTextDocument(ODT)檔案轉換為MicrosoftWord(Docx、DOC等)。格式。如何在Windows11/10中將ODT轉換為Word以下是您可以在WindowsPC上將ODT文件轉換為DOC或DOCX格式的方法:使用寫字板或Word將ODT轉換為Word我們要向您展示的第一種方法是使用寫字板或MicrosoftWord將ODT轉換為Word。以下是實現這一點的步驟:首先,使用「開始」功能表開啟寫字板應用程式。現在,轉到

PHP 月份轉換為英文月份的實作方法詳解 PHP 月份轉換為英文月份的實作方法詳解 Mar 21, 2024 pm 06:45 PM

這篇文章將詳細介紹如何將PHP中的月份轉換為英文月份的方法,同時給出具體的程式碼範例。在PHP開發中,有時候我們需要將數字表示的月份轉換為英文的月份,這在一些日期處理或資料展示的場景下非常實用。以下將從實作原理、具體程式碼範例和注意事項等方面進行詳解。一、實作原理在PHP中,可以透過使用DateTime類別和format方法來實現將數位月份轉換為英文月份。 Date

qq音樂怎麼轉換mp3格式 手機上qq音樂轉mp3格式 qq音樂怎麼轉換mp3格式 手機上qq音樂轉mp3格式 Mar 21, 2024 pm 01:21 PM

qq音樂讓大家盡情享受觀影解悶,每天都可以使用這個軟體,輕鬆滿足自己的使用,優質海量的歌曲,任由大家暢聽,也可以下載保存起來,下次聽的時候,不需要網絡,而在這裡下載的歌曲不是MP3格式的,無法在其他平台使用,會員歌曲過期後也沒有辦法再聽了,所以很多小伙伴們,都想要將歌曲轉換成MP3格式的,在這裡小編為你們提供方法,幫助大家都可以使用起來!  1、開啟電腦qq音樂,點選右上角【主選單】按鈕,點選【音訊轉碼】,選擇【新增歌曲】選項,新增需要轉換的歌曲;  2、新增歌曲完畢,點選選擇轉換為【mp3

See all articles