Vue-cli建立單一頁面到多頁面的方法實例程式碼

對於某些項目來說，單一頁面不能很好的滿足需求，所以需要將vue-cli建立的單頁項目改為多頁面項目。本文主要跟大家介紹Vue-cli創建專案從單頁到多頁的方法，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟著小編過來看看吧，希望能幫助大家。

#需要修改以下幾個檔案：

1、下載依賴glob

$npm install glob --save-dev

2、修改build下的文件

（1）修改webpack.base.conf.js

#新增以下程式碼：

var glob = require('glob')；
var entries = getEntry('./src/pages/**/*.js')

將module.exports中的

entry: {
   app: './src/main.js'
  },

註解掉，然後加入這一行程式碼：

 entry: entries,

至於entries是什麼，別急呀，請看下面：

新增一個方法：

//获取入口js文件
function getEntry(globPath) {
 var entries = {},
  basename, tmp, pathname;

 glob.sync(globPath).forEach(function (entry) {
  basename = path.basename(entry, path.extname(entry));
  pathname = basename.split("_")[0]; //index_main.js得到index
  entries[pathname] = entry;
 });
 return entries;
}

這個檔案修改成這樣子就可以了。

（2）修改webpack.dev.conf.js

加入以下程式碼：

//引入
var glob = require('glob')
var path = require('path')

將module.exports中的plugins裡的

new HtmlWebpackPlugin({
  filename: 'index.html',
  template: 'index.html',
  inject: true
}),

註解掉，然後加入以下程式碼：

function getEntry(globPath) {
 
 var entries = {},basename;

 glob.sync(globPath).forEach(function (entry) {
  basename = path.basename(entry, path.extname(entry));
  entries[basename] = entry;
 });
 return entries;
}

var pages = getEntry('src/pages/**/*.html');

for (var pathname in pages) {
 // 配置生成的html文件，定义路径等
 var conf = {
  filename: pathname + '.html',
  template: pages[pathname],  // 模板路径
  inject: true,       // js插入位置
  chunks:[pathname]
 };
 module.exports.plugins.push(new HtmlWebpackPlugin(conf));
}

這個檔案修改到此就可以了。

（3）webpack.prod.conf.js

這個檔案修改的套路與上一個檔案類似
 加入以下程式碼： var glob = require( 'glob') 因為專案在建立時，生成專案的時候是直接將可選的所有依賴都選擇了yes，所以專案中的env的宣告定義如下：

複製程式碼 程式碼如下:

var env = process.env.NODE_ENV === 'testing ? require('../config/test.env') : config.build.env ;

#但由於webpack.test.conf.js檔案目前還沒有進行修改，所以需要把這行宣告換成下面這行：

var env = config.build.env

將webpackConfig中的plugins裡的

new HtmlWebpackPlugin({
  filename: config.build.index,
  template: 'index.html',
  inject: true,
  minify: {
   removeComments: true,
   collapseWhitespace: true,
   removeAttributeQuotes: true
  },
  chunksSortMode: 'dependency'
}),

註解掉，在宣告定義webpackConfig的後面加入以下程式碼：

function getEntry(globPath) {
 var entries = {},
  basename;
 glob.sync(globPath).forEach(function (entry) {
  basename = path.basename(entry, path.extname(entry));
  entries[basename] = entry;
 });
 return entries;
}

var pages = getEntry('src/pages/**/*.html');

for (var pathname in pages) {
 var conf = {
   filename: process.env.NODE_ENV === 'testing'
    ? pathname + '.html'
    : config.build[pathname],
   template: pages[pathname],
   inject: true,
   minify: {
    removeComments: true,
    collapseWhitespace: true,
    removeAttributeQuotes: true
   },
   chunks:[pathname]
  }
 webpackConfig.plugins.push(new HtmlWebpackPlugin(conf));
}

此時，這個檔案也修改好了。

3、修改config下的檔案

這個資料夾下，只需要修改一個檔案：index.js 這個檔案的作用是，尋找檔案路徑，然後根據這個檔案設定的目錄層級，產生打包後的檔案以及對應的層級檔案結構。 新增以下程式碼：

var build = {
 env: require('./prod.env'),
 assetsRoot: path.resolve(__dirname, '../dist'),
 assetsSubDirectory: 'static',
 assetsPublicPath: '/',
 productionSourceMap: true,
 productionGzip: false,
 productionGzipExtensions: ['js', 'css']
}

function getEntry(globPath) {
 var entries = {},basename;

 glob.sync(globPath).forEach(function(entry) {
  basename = path.basename(entry, path.extname(entry));
  entries[basename] = entry;
 });
 return entries;
}

var pages = getEntry('src/pages/**/*.html');
 
//入口 index: path.resolve(__dirname, '../dist/index.html')
for (var pathname in pages) {
 build[pathname] = path.resolve(__dirname, '../dist/' + pathname + '.html')
}

然後將module.exports中的build的值換成我們剛剛新增宣告的變數build。 如果希望修改打包後的目層級結構，可以在build中修改；還可以在build中增加我們需要定義的變量，例如我們需要將fabfile.py和favicon.ico拷貝到dist目錄下的a目錄下，就可以在build中定義一個屬性，

distA:path.resolve(__dirname, '../dist/a),

然後因為在webpack.prod.conf.js中已經引入了'copy-webpack-plugin'（var CopyWebpackPlugin = require('copy-webpack-plugin') ），我們就可以在webpackConfig.plugins下加入如下程式碼：

new CopyWebpackPlugin([
  {
   from: path.resolve(__dirname, '../fabfile.py'),
   to: config.build.distA,
   template: 'fabfile.py'
  }
 ])
new CopyWebpackPlugin([
  {
   from: path.resolve(__dirname, '../favicon.ico'),
   to: config.build.distA,
   template: 'favicon.ico'
  }
 ])

在src目錄下新增pages資料夾

目錄的層級結構安排成類似這種形式：

5、打包

做完以上修改，雖然本地運行沒有問題，但是打包後，還是會有問題，會出現報錯：webpackJsonp is not defined
解決方式如下： 在webpack.prod.conf.js檔案下的for (var pathname in pages)循環中定義的conf裡，新增兩行程式碼：

chunksSortMode: 'dependency', // dependency 页面中引入的js按照依赖关系排序；manual 页面中引入的js按照下面的chunks的数组中的顺序排序；

chunks: ['manifest', 'vender', pathname] // 生成的页面中引入的js，'manifest', 'vender'这两个js是webpack在打包过程中抽取出的一些公共方法依赖，其中，'manifest'又是从'vender'中抽取得到的，所以这三个js文件的依赖关系是 pathname依赖 'vender'，'vender'依赖'manifest'.

綜上，就是本次專案從單一頁面到多頁面專案的轉變歷程，關於webpack.test.conf.js檔案的修改，後續修改成功後，會繼續補充加入。

相關推薦：

vue建置多頁面應用程式實例程式碼分享

vue cli重構多頁面腳手架實例分享

如何將Vue-cli 改造成支援多頁面的history模式

以上是Vue-cli建立單一頁面到多頁面的方法實例程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！