首頁 > web前端 > js教程 > 主體

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

亚连
發布: 2018-06-09 17:42:55
原創
1520 人瀏覽過

本文分步驟為大家介紹了基於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中將物件新增的屬性加入檢測序列的方法有哪些? ######

以上是在vue中使用cli如何實現重構多頁面腳手架的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
vue
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!