在vue中使用cli如何實現重構多頁面腳手架

來源：懂視網責編：小采時間：2020-11-27 19:38:44

在vue中使用cli如何實現重構多頁面腳手架

在vue中使用cli如何實現重構多頁面腳手架:本文分步驟給大家介紹了基于vue cli重構多頁面腳手架過程，非常不錯，具有參考借鑒價值，需要的朋友參考下官方提供的項目生成工具vue-cli沒有對多頁面webApp的支持，但是在實際的項目中，我們需要這樣的腳手架，參考了很多大牛的方法，這里提供了一種我的單頁

推薦度：

點擊下載本文 文檔為doc格式

導讀在vue中使用cli如何實現重構多頁面腳手架:本文分步驟給大家介紹了基于vue cli重構多頁面腳手架過程，非常不錯，具有參考借鑒價值，需要的朋友參考下官方提供的項目生成工具vue-cli沒有對多頁面webApp的支持，但是在實際的項目中，我們需要這樣的腳手架，參考了很多大牛的方法，這里提供了一種我的單頁

本文分步驟給大家介紹了基于vue cli重構多頁面腳手架過程，非常不錯，具有參考借鑒價值，需要的朋友參考下

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

準備

使用vue-cli生成一個你需要的單頁面項目腳手架，然后我們就要開始我們的改裝工程了。

重構過程

步驟一改變目錄結構

step1 在src目錄下面新建views文件夾,然后再views文件夾下新建index文件夾

step2 將src目錄下的main.js和App.vue移動到step1中的index文件夾下，并將main.js重命名為index.js

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())

配置完成。正常啟動項目即可。

上面是我整理給大家的，希望今后會對大家有幫助。

在jQuery中實現碰到邊緣反彈的動畫效果該如何做？

如何解決Vue不能檢測數組或對象變動方面問題？

在vue中將對象新增的屬性添加到檢測序列的方法有哪些？

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com