專案開發過程中會遇到需要多個主頁展示情況，故在vue單頁面的基礎上進行配置多頁面開發以滿足此需求，此記錄為統一配置出入口。
2.1.1 首頁一
2.1.2 首頁二
2.1.3 頁面展示
2.2.1 webpack構建工具：utils.js
在build>utils.js中增加通用的入口檔案方法與通用的頁面打包檔案方法，由於現在專案的多頁面檔案全部在src>pages資料夾下，所以去判斷對應的入口js檔案和頁面html檔案即可
'use strict'const path = require('path')
const config = require('../config')
const extracttextplugin = require('extract-text-webpack-plugin')
const packageconfig = require('../package.json')
//glob是webpack安裝時依賴的乙個第三方模組，該模組允許使用 *等符號, 例如lib/*.js就是獲取lib資料夾下的所有js字尾名的檔案
let glob = require('glob');
let htmlwebpackplugin = require('html-webpack-plugin');//
頁面模板
let pagespath = path.resolve(__dirname, '../src/pages');//
多頁面路徑
let merge = require('webpack-merge');//
用於做相應的merge處理
exports.assetspath = function
(_path)
exports.cssloaders = function
(options)
const cssloader =
} const postcssloader =
} //generate loader string to be used with extract text plugin
function
generateloaders (loader, loaderoptions) , loaderoptions, )})}
//extract css when that option is specified
//(which is the case during production build)
if(options.extract) )
} else
} //
return
), scss: generateloaders('sass'),
stylus: generateloaders('stylus'),
styl: generateloaders('stylus')
}}//generate loaders for standalone style files (outside of .vue)
exports.styleloaders = function
(options) )
} return
output}/*
* * 多入口配置
* 通過glob模組讀取pages資料夾下的所有對應資料夾下的js字尾檔案
* 當檔案存在就為某一入口
**/exports.entries = function
() entryfiles.foreach((filepath) =>);
return
map};/**
* 多頁面輸出配置
* 通過glob模組讀取pages資料夾下的所有對應資料夾下的html字尾檔案
* 當檔案存在就為某一出口
**/exports.htmlplugin = function
() ;
if (process.env.node_env === 'production') ,
chunkssortmode: 'dependency'})
}arr.push(
newhtmlwebpackplugin(conf))
});return
arr};
exports.createnotifiercallback = () =>)
}}
2.2.2 webpack基礎配置：webpack.base.conf.js
把原有入口配置更改為呼叫通用入口配置：utils.entries()
entry: utils.entries(),2.2.3 webpack開發環境配置：webpack.dev.conf.js
把原有單頁面打包更改為調取通用打包，增加至外掛程式中。
plugins: [2.2.4 webpack生產環境配置：index.js與webpack.prod.conf.js***].concat(utils.htmlplugin())
***config>index.js進行打包基礎配置
***build>webpack.prod.conf.js 進行打包配置
把原有單頁面打包更改為調取通用打包，增加至外掛程式中。
plugins: [注意：打包後可安裝http-server進行訪問打包好的檔案dist：http-server ./dist；若沒有安裝依賴可使用命令安裝：npm install http-server -g***].concat(utils.htmlplugin())
vue 多頁面開發配置
增加 vue.config.js 內容如下 const fs require fs const path require path const glob require glob const titles require title.js const mod path path.resolve di...
vue 多頁面應用例子 vue 如何實現多頁面應用
其實我孤獨的像條狗 再此我先說明 我寫的這個例子是乙個成熟的專案中直接加入的,裡面有好多配置都是配好的 但是這些都不重要,因為沒有太大的關係,進入正題 我們平時開發 vue專案的時候,就有一種感覺就是 vue就像是專門為單頁應用而誕生的,因為人家的官方文件中也說了 在這裡插入描述 其實不是的,因為v...
vue多頁面開發
最外層有index.html，在src資料夾下，有pages資料夾分別包含content.html，info.html，此外你也可以擴充套件更多的page，這裡就不多贅述。那麼要怎麼修改配置檔案，實現多頁面功能呢？1.修改打包入口檔案位址 在build資料夾下，webpack.base.conf.j...