vue-cli實(shí)現(xiàn)多頁面多路由的示例代碼

更新時(shí)間：2018年01月30日 09:49:28 作者：chen1218chen

本篇文章主要介紹了vue-cli實(shí)現(xiàn)多頁面多路由的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

項(xiàng)目下載地址 vue-cli多頁面多路由項(xiàng)目示例：vue+webpack+vue-router+vuex+mock+axios

Usage

This is a project template for vue-cli.

github上找到某大神的一個(gè)基于vue-cli模板的vueAdmin后臺(tái)管理的模板，根據(jù)項(xiàng)目需求改成一個(gè)多頁面多路由的vue項(xiàng)目。

PC端：后臺(tái)管理頁面，單獨(dú)的頁面入口，單獨(dú)的路由。

移動(dòng)端：業(yè)務(wù)展示頁面，單獨(dú)的頁面入口，單獨(dú)的路由。

踩了無數(shù)的坑，終于是初見效果了，隨后繼續(xù)優(yōu)化更新

Install

# install dependencies
npm install

# serve with hot reload at localhost:8088
npm run dev

# build for production with minification
npm run build

使用Nginx服務(wù)器進(jìn)行訪問，地址如下：

PC端 http://localhost/modules/index.html

移動(dòng)APP http://localhost/modules/index.html

多頁面配置

vue2.0版本多頁面入口,是由webpack配置來完成的，我的項(xiàng)目文件結(jié)構(gòu)如下

  webpack
   |---build
   |---config
   |---dist 
   |---route 路由
   |---src
    |---api axios請(qǐng)求
    |---assets 資源
    |---common 公共js資源目錄
    |---components組件
    |---modules各個(gè)模塊
     |---index  index模塊
      |---views 組件
      |---index.html
      |---index.js
      |---index.vue
     |---phone    phone模塊
      |---phone.html
      |---phone.js
      |---phone.vue
      |---phone 組件

modules下為多個(gè)頁面入口，文件名稱保持一致，如：

modules
 |---index
  |---index.html
  |---index.js

.vue文件名稱任意。

原則上這些文件名稱都可以隨意定，但由于下面entry入口函數(shù)的限定，換成其他名字可以會(huì)找不到。如果想要起其他文件名，請(qǐng)相應(yīng)修改getMultiEntry()函數(shù)。

until.js

until.js中添加getMultiEntry()，依賴 glob插件，需要提前下載好，until.js開始引入

//獲取多級(jí)的入口文件
exports.getMultiEntry = function (globPath) {
 var entries = {},
  basename, tmp, pathname;

 glob.sync(globPath).forEach(function (entry) {
  basename = path.basename(entry, path.extname(entry));
  tmp = entry.split('/').splice(-4);

 var pathsrc = tmp[0]+'/'+tmp[1];
 if( tmp[0] == 'src' ){
  pathsrc = tmp[1];
 }
 //console.log(pathsrc)
  pathname = pathsrc + '/' + basename; // 正確輸出js和html的路徑
  entries[pathname] = entry;
  //console.log(pathname+'-----------'+entry);
 });

 return entries;
}

~\build\webpack.base.conf.js

找到entry，添加多入口

entry:entries,

運(yùn)行、編譯的時(shí)候每一個(gè)入口都會(huì)對(duì)應(yīng)一個(gè)Chunk。 PS：終于明白這個(gè)chunk的含義了/(ㄒoㄒ)/~~

~\build\webpack.dev.conf.js

文末添加以下配置：

var pages = utils.getMultiEntry('./src/'+config.moduleName+'/**/*.html');
for (var pathname in pages) {
 // 配置生成的html文件，定義路徑等
 var conf = {
  filename: pathname + '.html',
  template: pages[pathname], // 模板路徑
  chunks: [pathname, 'vendors', 'manifest'], // 每個(gè)html引用的js模塊
  inject: true       // js插入位置
 };
 // 需要生成幾個(gè)html文件，就配置幾個(gè)HtmlWebpackPlugin對(duì)象
 module.exports.plugins.push(new HtmlWebpackPlugin(conf));
}

其中config.moduleName = 'modules'

~\build\webpack.prod.conf.js

  ...

//構(gòu)建生成多頁面的HtmlWebpackPlugin配置，主要是循環(huán)生成
var pages = utils.getMultiEntry('./src/'+config.moduleName+'/**/*.html');
for (var pathname in pages) {
 var conf = {
  filename: pathname + '.html',
  template: pages[pathname], // 模板路徑
  chunks: ['vendor',pathname], // 每個(gè)html引用的js模塊
  inject: true,       // js插入位置
 hash:true
 };

 webpackConfig.plugins.push(new HtmlWebpackPlugin(conf));
}
module.exports = webpackConfig

其中config.moduleName = 'modules'

至此，多頁面的配置已經(jīng)完成。訪問地址為：
index : http://localhost:8088/modules/index.html
phone : http://localhost:8088/modules/phone.html

Browser Support

Modern browsers and Internet Explorer 10+.

snapshots