vue.js多頁面開發(fā)環(huán)境搭建過程
利用 vue-cli 搭建的項目大都是單頁面應用項目，對于簡單的項目，單頁面就能滿足要求。但對于有多個子項目的應用，如果創(chuàng)建多個單頁面，顯示有點重復，特別是 node_modules 會有多份相同的。如果全部放到單頁面項目下，又顯得有點亂，這時候通過改造 vue-cli 搭建的項目為多頁面，就是一個比較好的解決方法。
如何改造單頁面 vue.js 項目為多頁面項目？下面是這次改造的具體過程。
一、創(chuàng)建單頁面 vue.js 項目
這里直接使用官方提供的腳手架 vue-cli3 創(chuàng)建，具體的過程請參考「vue-cli3.0 升級記錄」
二、多頁面配置
1、添加配置文件
在項目根路徑下( 與 package.json 同目錄 )添加 vue.config.js，內(nèi)容如下：
module.exports = {
pages: {
index: {
// 入口js的路徑
entry: './src/main',
// 頁面模板路徑
template: './src/public/index.html'
}
}
}
上面的配置其實就是 vue-cli 建立項目的默認配置，如果增加頁面，在 pages 節(jié)點下添加配置即可。但這種方式，每次增加一個新頁面，就需要手動添加節(jié)點，這種重復的事情顯然不智能。下面繼續(xù)改造。
2、調(diào)整項目結構
要自動化，那么就需要按定一種規(guī)則把頁面組織下。如把所有路由頁面都放到 src/pages 目錄下，改造后的結構如下：
3、編寫自動配置文件
在項目根路徑下( 與 package.json 同目錄 )添加 vue.util.js，內(nèi)容如下：
const path = require('path')
const glob = require('glob')
const START_PATH = '/src/pages/'
const PAGE_PATH = path.resolve(__dirname, '.' + START_PATH)
exports.pages = function () {
var entryFiles = glob.sync(PAGE_PATH + '/**/*.html')
var obj = {}
entryFiles.forEach((filePath) => {
var dirPath = filePath.substring(0, filePath.lastIndexOf('/'))
var dirName = dirPath.substring(dirPath.lastIndexOf('/') + 1)
var filename = filePath.substring(filePath.lastIndexOf(START_PATH) + START_PATH.length, filePath.lastIndexOf('/'))
if (filename.endsWith(dirName)) {
obj[filename] = {
entry: filePath.substring(0, filePath.lastIndexOf('.html')) + '.js',
template: filePath.substring(0, filePath.lastIndexOf('.html')) + '.html'
}
}
})
return obj
}
在 vue.config.js 使用上面的配置
const utils = require('./vue.util')
module.exports = {
pages: utils.pages()
}
三、測試下
yarn dev
瀏覽器輸入：
http://localhost:8080/index.html 和 http://localhost:8080/index2.html
OK，多頁面配置完成
總結
以上所述是小編給大家介紹的vue.js多頁面開發(fā)環(huán)境搭建過程,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！
相關文章
vue cli3.x打包后如何修改生成的靜態(tài)資源的目錄和路徑
這篇文章主要介紹了vue cli3.x打包后如何修改生成的靜態(tài)資源的目錄和路徑，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了vue中forEach循環(huán)的使用，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
這篇文章主要介紹了vue3使用深度選擇器修改樣式問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了vue中的計算屬性和偵聽屬性，幫助大家更好的理解和學習vue框架的使用，感興趣的朋友可以了解下2020-11-11
Vue3中使用pnpm搭建monorepo開發(fā)環(huán)境
這篇文章主要為大家介紹了Vue3中使用pnpm搭建monorepo開發(fā)環(huán)境示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
vue-element-admin開發(fā)教程(v4.0.0之前)
本文主要介紹了vue-element-admin開發(fā)教程(v4.0.0之前)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-04-04
最近聽到有人提到了Vue2的functional組件,大致上是說這個東西沒有生命周期,在渲染層面上,會減少很多的消耗,一番處理之后,首屏時間和內(nèi)存都能減少不少,所以本文小編就來和大家聊聊Vue2中的functional組件<BR>2023-08-08
詳解vue項目優(yōu)化之按需加載組件-使用webpack require.ensure
本篇文章主要介紹了詳解vue項目優(yōu)化之按需加載組件-使用webpack require.ensure，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
這篇文章主要介紹了Vue學習-VueRouter路由基礎,路由本質上就是超鏈接,xiamian?文章圍繞VueRouter路由的相關資料展開詳細內(nèi)容，需要的小伙伴可以參考一下，希望對你的學習有所幫助2021-12-12
vue3?ts編寫echart是tooltip無法展示的解決
這篇文章主要介紹了vue3?ts編寫echart是tooltip無法展示的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10