vue如何搭建多頁面多系統(tǒng)應(yīng)用
本文為大家分享了vue如何搭建多頁面多系統(tǒng)應(yīng)用,供大家參考,具體內(nèi)容如下
一、多頁面多系統(tǒng)應(yīng)用
1、思路
使用Vue搭建多頁應(yīng)用。所有系統(tǒng)都在同一目錄下。配置多入口多出口。每個系統(tǒng)之間可以鏈接。每個系統(tǒng)內(nèi)依然采用Vue單頁應(yīng)用開發(fā)。
2、組件復(fù)用性
可以將所有的系統(tǒng)公共組件放到系統(tǒng)目錄最外面,以達到組件復(fù)用。在系統(tǒng)內(nèi)部依然將自己獨立的組件封裝,復(fù)用。這樣可以最大限度的提高組件的復(fù)用性。
3、路由
每個系統(tǒng)單獨進行路由配置
4、數(shù)據(jù)管理
每個系統(tǒng)數(shù)據(jù)倉庫單獨處理
5、目錄結(jié)構(gòu)

6、效果


在做Vue項目的時候,需要用對多個類似系統(tǒng)做一個集成。想過很多種方法,比如:完全單頁應(yīng)用,分開獨立應(yīng)用,最終還是測試了一下多頁面開發(fā)多系統(tǒng)。
準(zhǔn)備工作:
使用vue-cli搭建最基本的vue項目。
修改webpack配置:
在這一步里我們需要改動的文件都在build文件下,分別是:
- utils.js
- webpack.base.conf.js
- webpack.dev.conf.js
- webpack.prod.conf.js
- 我就按照順序放出完整的文件內(nèi)容,然后在做修改或添加的位置用注釋符標(biāo)注出來
utils.js
最最后添加如下代碼:
/* 這里是添加的部分 ---------------------------- 開始 */
// glob是webpack安裝時依賴的一個第三方模塊,還模塊允許你使用 *等符號, 例如lib/*.js就是獲取lib文件夾下的所有js后綴名的文件
var glob = require('glob')
// 頁面模板
var HtmlWebpackPlugin = require('html-webpack-plugin')
// 取得相應(yīng)的頁面路徑,因為之前的配置,所以是src文件夾下的pages文件夾
var PAGE_PATH = path.resolve(__dirname, '../src/system')
// 用于做相應(yīng)的merge處理
var merge = require('webpack-merge')
//多入口配置
// 通過glob模塊讀取pages文件夾下的所有對應(yīng)文件夾下的js后綴文件,如果該文件存在
// 那么就作為入口處理
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
}
//多頁面輸出配置
// 與上面的多頁面入口配置相同,讀取pages文件夾下的對應(yīng)的html后綴文件,然后放入數(shù)組中
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',
// 頁面模板需要加對應(yīng)的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
}
/* 這里是添加的部分 ---------------------------- 結(jié)束 */
webpack.base.conf.js
module.exports = {
context: path.resolve(__dirname, '../'),
/* 修改部分 ---------------- 開始 */
entry: utils.entries(),
/* 修改部分 ---------------- 結(jié)束 */
output: {
path: config.build.assetsRoot,
filename: '[name].js',
publicPath: process.env.NODE_ENV === 'production' ?
config.build.assetsPublicPath : config.dev.assetsPublicPath
}
...
}
webpack.dev.conf.js
plugins: [
new webpack.DefinePlugin({
'process.env': require('../config/dev.env')
}),
new webpack.HotModuleReplacementPlugin(),
new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
new webpack.NoEmitOnErrorsPlugin(),
// https://github.com/ampedandwired/html-webpack-plugin
/* 注釋這個區(qū)域的文件 ------------- 開始 */
// new HtmlWebpackPlugin({
// filename: 'index.html',
// template: 'index.html',
// inject: true
// }),
/* 注釋這個區(qū)域的文件 ------------- 結(jié)束 */
// copy custom static assets
new CopyWebpackPlugin([{
from: path.resolve(__dirname, '../static'),
to: config.dev.assetsSubDirectory,
ignore: ['.*']
}])
/* 添加 .concat(utils.htmlPlugin()) ------------------ */
].concat(utils.htmlPlugin())
webpack.prod.conf.js
/* 注釋這個區(qū)域的內(nèi)容 ---------------------- 開始 */
// 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'
// }),
/* 注釋這個區(qū)域的內(nèi)容 ---------------------- 結(jié)束 */
添加:

目錄結(jié)構(gòu)介紹
- src就是我所使用的工程文件了,assets,components,system分別是靜態(tài)資源文件、組件文件、頁面文件。
- 前兩個就不多說,主要是頁面文件里,我目前是按照項目的模塊分的文件夾,你也可以按照你自己的需求調(diào)整。然后在每個模塊里又有三個內(nèi)容:vue文件,js文件和html文件。這三個文件的作用就相當(dāng)于做spa單頁面應(yīng)用時,根目錄的index.html頁面模板,src文件下的main.js和app.vue的功能。
- 原先,入口文件只有一個main.js,但現(xiàn)在由于是多頁面,因此入口頁面多了,我目前就是兩個:index和system2,之后如果打包,就會在dist文件下生成兩個HTML文件:index.html和system2.html(可以參考一下單頁面應(yīng)用時,打包只會生成一個index.html,區(qū)別在這里)。
注意的地方
配置js時候:
import Vue from 'Vue'
import cell from './cell.vue'
/* eslint-disable no-new */
new Vue({
el: '#app',
render: h => h(cell)
})
頁面跳轉(zhuǎn):
可以寫成: <a href='system2.html'></a>
打包后的資源路徑
├── dist
│ ├── js
│ ├── css
│ ├── index.html
│ └── system2.html
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
vue?element-ui的el-input-number默認(rèn)值設(shè)置為空方法
這篇文章主要給大家介紹了關(guān)于vue?element-ui的el-input-number默認(rèn)值設(shè)置為空的相關(guān)資料,el-input-number組件是Element?UI非常常用的一個數(shù)字輸入框組件,它提供了默認(rèn)值設(shè)置的選項,需要的朋友可以參考下2023-08-08
vue-cli 目錄結(jié)構(gòu)詳細(xì)講解總結(jié)
這篇文章主要介紹了vue-cli 目錄結(jié)構(gòu)詳細(xì)講解總結(jié),詳細(xì)的介紹了整個項目的目錄以及目錄文件的用法,非常具有實用價值,需要的朋友可以參考下2019-01-01
elementui?el-upload一次請求上傳多個文件的實現(xiàn)
使用ElementUI?Upload的時候發(fā)現(xiàn)如果是默認(rèn)方案,上傳多張圖片并不是真正的一次上傳多張,本文就來介紹一下elementui?el-upload一次請求上傳多個文件的實現(xiàn),具有一定的參考價值,感興趣的可以了解一下2023-10-10
Vue3.2?setup語法糖及Hook函數(shù)基本使用
這篇文章主要為大家介紹了Vue3.2?setup語法糖及Hook函數(shù)基本使用示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-07-07
Vue如何使用ElementUI對表單元素進行自定義校驗及踩坑
有一些驗證不是通過input select這樣的受控組件來觸發(fā)驗證條件的 ,可以通過自定義驗證的方法來觸發(fā),下面這篇文章主要給大家介紹了關(guān)于Vue如何使用ElementUI對表單元素進行自定義校驗及踩坑的相關(guān)資料,需要的朋友可以參考下2023-02-02

