先了解一些單頁面和多頁面的區(qū)別

mm 多頁應(yīng)用模式MPA 單頁應(yīng)用模式SPA 應(yīng)用構(gòu)成 由多個(gè)完整頁面構(gòu)成 一個(gè)外殼頁面和多個(gè)頁面片段構(gòu)成 跳轉(zhuǎn)方式 頁面之間的跳轉(zhuǎn)是從一個(gè)頁面跳轉(zhuǎn)到另一個(gè)頁面 頁面片段之間的跳轉(zhuǎn)是把一個(gè)頁面片段刪除或隱藏，加載另一個(gè)頁面片段并顯示出來。這是片段之間的模擬跳轉(zhuǎn)，并沒有開殼頁面 跳轉(zhuǎn)后公共資源是否重新加載 是 否 URL模式

http://xxx/page1.html

http://xxx/page1.html

http://xxx/shell.html#page1

http://xxx/shell.html#page2

用戶體驗(yàn) 頁面間切換加載慢，不流暢，用戶體驗(yàn)差，特別是在移動(dòng)設(shè)備上 頁面片段間的切換快，用戶體驗(yàn)好，包括在移動(dòng)設(shè)備上 能否實(shí)現(xiàn)轉(zhuǎn)場動(dòng)畫 無法實(shí)現(xiàn) 容易實(shí)現(xiàn)（手機(jī)app動(dòng)效） 頁面間傳遞數(shù)據(jù) 依賴URL、cookie或者localstorage，實(shí)現(xiàn)麻煩 因?yàn)樵谝粋€(gè)頁面內(nèi)，頁面間傳遞數(shù)據(jù)很容易實(shí)現(xiàn) 搜索引擎優(yōu)化（SEO） 可以直接做 需要單獨(dú)方案做，有點(diǎn)麻煩 特別適用的范圍 需要對搜索引擎友好的網(wǎng)站 對體驗(yàn)要求高的應(yīng)用，特別是移動(dòng)應(yīng)用 搜索引擎優(yōu)化（SEO） 可以直接做 需要單獨(dú)方案做，有點(diǎn)麻煩 開發(fā)難度 低一些，框架選擇容易 高一些，需要專門的框架來降低這種模式的開發(fā)難度

為什么用Vue寫多頁面

vue只是一個(gè)工具，把他當(dāng)做一個(gè)操作dom的工具來用寫多頁面，有單頁面的優(yōu)勢同時(shí)是多頁面的表現(xiàn)形式（具體要看需求）

構(gòu)建多頁面應(yīng)用

準(zhǔn)備工作

新建一個(gè)項(xiàng)目，項(xiàng)目需要一個(gè)'glob':'^7.0.3'的依賴

修改webpack的配置

我們需要更改的文件

utils.js webpack.base.conf.js webpack.dev.conf.js webpack.prod.conf.js

utils.js在最后添加

// utils.js文件/* 這里是添加的部分 ---------------------------- 開始 */// glob是webpack安裝時(shí)依賴的一個(gè)第三方模塊，還模塊允許你使用 *等符號(hào), 例如lib/*.js就是獲取lib文件夾下的所有js后綴名的文件var glob = require(’glob’)// 頁面模板var HtmlWebpackPlugin = require(’html-webpack-plugin’)// 取得相應(yīng)的頁面路徑，因?yàn)橹暗呐渲茫允莝rc文件夾下的pages文件夾var PAGE_PATH = path.resolve(__dirname, ’../src/pages’)// 用于做相應(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腳本，如果不加這行則每個(gè)頁面都會(huì)引入所有的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 = { /* 修改部分 ---------------- 開始 */ entry: utils.entries(), /* 修改部分 ---------------- 結(jié)束 */ output: { path: config.build.assetsRoot,

webpack.dev.conf.js 文件

// https://github.com/glenjamin/webpack-hot-middleware#installation--usage new webpack.HotModuleReplacementPlugin(), new webpack.NoEmitOnErrorsPlugin(), // https://github.com/ampedandwired/html-webpack-plugin /* 注釋這個(gè)區(qū)域的文件 ------------- 開始 */ // new HtmlWebpackPlugin({ // filename: ’index.html’, // template: ’index.html’, // inject: true // }), /* 注釋這個(gè)區(qū)域的文件 ------------- 結(jié)束 */ new FriendlyErrorsPlugin() /* 添加 .concat(utils.htmlPlugin()) ------------------ */ ].concat(utils.htmlPlugin())})

webpack.prod.conf.js 文件

new OptimizeCSSPlugin({ cssProcessorOptions: { safe: true } }), // generate dist index.html with correct asset hash for caching. // you can customize output by editing /index.html // see https://github.com/ampedandwired/html-webpack-plugin /* 注釋這個(gè)區(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’ // }), /* 注釋這個(gè)區(qū)域的內(nèi)容 ---------------------- 結(jié)束 */ // split vendor js into its own file new webpack.optimize.CommonsChunkPlugin({ name: ’vendor’, minChunks: function (module, count) { // any required modules inside node_modules are extracted to vendor return ( module.resource && /.js$/.test(module.resource) && module.resource.indexOf( path.join(__dirname, ’../node_modules’) ) === 0 ) } }), // extract webpack runtime and module manifest to its own file in order to // prevent vendor hash from being updated whenever app bundle is updated new webpack.optimize.CommonsChunkPlugin({ name: ’manifest’, chunks: [’vendor’] }), // copy custom static assets new CopyWebpackPlugin([{ from: path.resolve(__dirname, ’../static’), to: config.build.assetsSubDirectory, ignore: [’.*’] }]) /* 該位置添加 .concat(utils.htmlPlugin()) ------------------- */ ].concat(utils.htmlPlugin())})if (config.build.productionGzip) { var CompressionWebpackPlugin = require(’compression-webpack-plugin’) webpackConfig.plugins.push( new CompressionWebpackPlugin({ asset: ’[path].gz[query]’, algorithm: ’gzip’, test: new RegExp( ’.(’ + config.build.productionGzipExtensions.join(’|’) + ’)$’ ), threshold: 10240, minRatio: 0.8 }) )}if (config.build.bundleAnalyzerReport) { var BundleAnalyzerPlugin = require(’webpack-bundle-analyzer’).BundleAnalyzerPlugin webpackConfig.plugins.push(new BundleAnalyzerPlugin())}module.exports = webpackConfig

src是我使用的工程文件，asset，components,pages分別是靜態(tài)資源文件，組件文件，頁面文件

pages是按照項(xiàng)目的模塊分的文件夾，每個(gè)模塊都有三個(gè)內(nèi)容：vue文件，js文件，html文件。這三個(gè)文件的作用相當(dāng)于做SPA單頁面應(yīng)用時(shí)，根目錄的index.html頁面模板，src文件下的main.js和app.vue的功能。原先，入口文件只有一個(gè)Main.js，但現(xiàn)在由于是多頁面，因此入口也沒多了，我目前就是兩個(gè)：index和cell,之后如果打包，就會(huì)在dist文件夾下生成兩個(gè)html文件：index.html和cell.html（可以參考一下單頁面應(yīng)用時(shí)，打包只會(huì)生成一個(gè)Index.html）

參考：

https://www.jb51.net/article/146566.htm

以上就是使用vue構(gòu)建多頁面應(yīng)用的示例的詳細(xì)內(nèi)容，更多關(guān)于vue構(gòu)建多頁面應(yīng)用的資料請關(guān)注好吧啦網(wǎng)其它相關(guān)文章！