使用vue-cli開(kāi)發(fā)多頁(yè)應(yīng)用的案例

這篇文章給大家分享的是有關(guān)使用vue-cli開(kāi)發(fā)多頁(yè)應(yīng)用的案例的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。

本文介紹了如何使用 vue-cli 開(kāi)發(fā)多頁(yè)應(yīng)用，分享給大家，具體如下：

修改的webpack配置文件

全局配置

修改 webpack.base.conf.js

打開(kāi) ~\build\webpack.base.conf.js ，找到entry，添加多入口

entry: {
  app: './src/main.js',
  app2: './src/main2.js',
  app3: './src/main3.js',
},

運(yùn)行、編譯的時(shí)候每一個(gè)入口都會(huì)對(duì)應(yīng)一個(gè)Chunk

run dev 開(kāi)發(fā)環(huán)境

修改 webpack.dev.conf.js

打開(kāi) ~\build\webpack.dev.conf.js ，在plugins下找到new HtmlWebpackPlugin，在其后面添加對(duì)應(yīng)的多頁(yè)，并為每個(gè)頁(yè)面添加Chunk配置

chunks: ['app']中的app對(duì)應(yīng)的是webpack.base.conf.js中entry設(shè)置的入口文件

plugins:[
  // https://github.com/ampedandwired/html-webpack-plugin
  // 多頁(yè):index.html → app.js
  new HtmlWebpackPlugin({
   filename: 'index.html',//生成的html
   template: 'index.html',//來(lái)源html
   inject: true,//是否開(kāi)啟注入
   chunks: ['app']//需要引入的Chunk，不配置就會(huì)引入所有頁(yè)面的資源
  }),
  // 多頁(yè):index2.html → app2.js
  new HtmlWebpackPlugin({
   filename: 'index2.html',//生成的html
   template: 'index2.html',//來(lái)源html
   inject: true,//是否開(kāi)啟注入
   chunks: ['app2']//需要引入的Chunk，不配置就會(huì)引入所有頁(yè)面的資源
  }),
  // 多頁(yè):index3.html → app3.js
  new HtmlWebpackPlugin({
   filename: 'index3.html',//生成的html
   template: 'index3.html',//來(lái)源html
   inject: true,//是否開(kāi)啟注入
   chunks: ['app3']//需要引入的Chunk，不配置就會(huì)引入所有頁(yè)面的資源
  })
]

run build 編譯

修改 config/index.js

打開(kāi)~\config\index.js，找到build下的index: path.resolve(__dirname, '../dist/index.html')，在其后添加多頁(yè)

build: {
  index: path.resolve(__dirname, '../dist/index.html'),
  index2: path.resolve(__dirname, '../dist/index2.html'),
  index3: path.resolve(__dirname, '../dist/index3.html'),
},

修改 webpack.prod.conf.js

打開(kāi)~\build\webpack.prod.conf.js，在plugins下找到new HtmlWebpackPlugin，在其后面添加對(duì)應(yīng)的多頁(yè)，并為每個(gè)頁(yè)面添加Chunk配置

HtmlWebpackPlugin 中的 filename 引用的是 config/index.js 中對(duì)應(yīng)的 build

plugins: [
  // 多頁(yè):index.html → app.js
  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',
    chunks: ['manifest','vendor','app']//需要引入的Chunk，不配置就會(huì)引入所有頁(yè)面的資源
  }),
  // 多頁(yè):index2.html → app2.js
  new HtmlWebpackPlugin({
    filename: config.build.index2,
    template: 'index2.html',
    inject: true,
    minify: {
      removeComments: true,
      collapseWhitespace: true,
      removeAttributeQuotes: true
    },
    chunksSortMode: 'dependency',
    chunks: ['manifest','vendor','app2']//需要引入的Chunk，不配置就會(huì)引入所有頁(yè)面的資源
  }),
  // 多頁(yè):index3.html → app3.js
  new HtmlWebpackPlugin({
    filename: config.build.index3,
    template: 'index3.html',
    inject: true,
    minify: {
      removeComments: true,
      collapseWhitespace: true,
      removeAttributeQuotes: true
    },
    chunksSortMode: 'dependency',
    chunks: ['manifest','vendor','app3']//需要引入的Chunk，不配置就會(huì)引入所有頁(yè)面的資源
  }),
]

如果頁(yè)面比較多，可以考慮使用循環(huán)將 HtmlWebpackPlugin 添加到 plugins

// utils.js
exports.getEntry = function(globPath, pathDir) {
  var files = glob.sync(globPath);
  var entries = {},
    entry, dirname, basename, pathname, extname;

  for (var i = 0; i < files.length; i++) {
    entry = files[i];
    dirname = path.dirname(entry);
    extname = path.extname(entry);
    basename = path.basename(entry, extname);
    pathname = path.join(dirname, basename);
    pathname = pathDir ? pathname.replace(new RegExp('^' + pathDir), '') : pathname;
    entries[pathname] = ['./' + entry];
  }
  return entries;
}

// webpack.base.conf.js
var pages = Object.keys(utils.getEntry('../src/views/**/*.html', '../src/views/'));
pages.forEach(function (pathname) {
  // https://github.com/ampedandwired/html-webpack-plugin
  var conf = {
    filename: '../views/' + pathname + '.html', //生成的html存放路徑，相對(duì)于path
    template: '../src/views/' + pathname + '.html', //html模板路徑
    inject: false,  //js插入的位置，true/'head'/'body'/false
    /*
     * 壓縮這塊，調(diào)用了html-minify，會(huì)導(dǎo)致壓縮時(shí)候的很多html語(yǔ)法檢查問(wèn)題，
     * 如在html標(biāo)簽屬性上使用{{...}}表達(dá)式，所以很多情況下并不需要在此配置壓縮項(xiàng)，
     * 另外，UglifyJsPlugin會(huì)在壓縮代碼的時(shí)候連同html一起壓縮。
     * 為避免壓縮html，需要在html-loader上配置'html?-minimize'，見(jiàn)loaders中html-loader的配置。
     */
    // minify: { //壓縮HTML文件
    //   removeComments: true, //移除HTML中的注釋
    //   collapseWhitespace: false //刪除空白符與換行符
    // }
  };
  if (pathname in config.entry) {
    conf.favicon = 'src/images/favicon.ico';
    conf.inject = 'body';
    conf.chunks = ['vendors', pathname];
    conf.hash = true;
  }
  config.plugins.push(new HtmlWebpackPlugin(conf));
});

同樣入口 entry 也可以使用

// webpack.base.conf.js
entry: {
  app: utils.getEntry('../src/scripts/**/*.js', '../src/scripts/')
},

感謝各位的閱讀！關(guān)于“使用vue-cli開(kāi)發(fā)多頁(yè)應(yīng)用的案例”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！