快捷導(dǎo)航

vue.js多頁面開發(fā)環(huán)境搭建過程

更新時(shí)間：2019年04月24日 08:28:06 作者：lifefriend_007

利用 vue-cli 搭建的項(xiàng)目大都是單頁面應(yīng)用項(xiàng)目，對于簡單的項(xiàng)目，單頁面就能滿足要求。這篇文章主要介紹了vue.js多頁面開發(fā)環(huán)境搭建 ,需要的朋友可以參考下

利用 vue-cli 搭建的項(xiàng)目大都是單頁面應(yīng)用項(xiàng)目，對于簡單的項(xiàng)目，單頁面就能滿足要求。但對于有多個(gè)子項(xiàng)目的應(yīng)用，如果創(chuàng)建多個(gè)單頁面，顯示有點(diǎn)重復(fù)，特別是 node_modules 會(huì)有多份相同的。如果全部放到單頁面項(xiàng)目下，又顯得有點(diǎn)亂，這時(shí)候通過改造 vue-cli 搭建的項(xiàng)目為多頁面，就是一個(gè)比較好的解決方法。

如何改造單頁面 vue.js 項(xiàng)目為多頁面項(xiàng)目？下面是這次改造的具體過程。

一、創(chuàng)建單頁面 vue.js 項(xiàng)目

這里直接使用官方提供的腳手架 vue-cli3 創(chuàng)建，具體的過程請參考「vue-cli3.0 升級(jí)記錄」

二、多頁面配置

1、添加配置文件

在項(xiàng)目根路徑下( 與 package.json 同目錄 )添加 vue.config.js，內(nèi)容如下：

module.exports = {
  pages: {
   index: {
    // 入口js的路徑
    entry: './src/main',
 // 頁面模板路徑
    template: './src/public/index.html'
   }
  }
 }

上面的配置其實(shí)就是 vue-cli 建立項(xiàng)目的默認(rèn)配置，如果增加頁面，在 pages 節(jié)點(diǎn)下添加配置即可。但這種方式，每次增加一個(gè)新頁面，就需要手動(dòng)添加節(jié)點(diǎn)，這種重復(fù)的事情顯然不智能。下面繼續(xù)改造。

2、調(diào)整項(xiàng)目結(jié)構(gòu)

要自動(dòng)化，那么就需要按定一種規(guī)則把頁面組織下。如把所有路由頁面都放到 src/pages 目錄下，改造后的結(jié)構(gòu)如下：

3、編寫自動(dòng)配置文件

在項(xiàng)目根路徑下( 與 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，多頁面配置完成

總結(jié)

以上所述是小編給大家介紹的vue.js多頁面開發(fā)環(huán)境搭建過程,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！

您可能感興趣的文章: