首頁  >  文章  >  web前端  >  如何使用vue-cli實現多頁應用

如何使用vue-cli實現多頁應用

亚连
亚连原創
2018-06-20 15:04:541632瀏覽

這篇文章主要介紹了詳解如何使用 vue-cli 開發多頁應用,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟著小編過來看看吧

本文介紹如何使用vue-cli 開發多頁應用,分享給大家,具體如下:

修改的webpack設定檔

全域設定

修改webpack.base.conf.js

#開啟~\build\webpack.base.conf.js ,找到entry ,新增多入口

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

運行、編譯的時候每一個入口都會對應一個Chunk

run dev 開發環境

修改webpack.dev.conf.js

開啟~\build\webpack.dev.conf.js ,在plugins下找到new HtmlWebpackPlugin,在其後面添加對應的多頁,並為每個頁面添加Chunk設定

chunks: ['app']中的app對應的是webpack.base.conf.js中entry設定的入口檔案

plugins:[
  // https://github.com/ampedandwired/html-webpack-plugin
  // 多页:index.html → app.js
  new HtmlWebpackPlugin({
   filename: 'index.html',//生成的html
   template: 'index.html',//来源html
   inject: true,//是否开启注入
   chunks: ['app']//需要引入的Chunk,不配置就会引入所有页面的资源
  }),
  // 多页:index2.html → app2.js
  new HtmlWebpackPlugin({
   filename: 'index2.html',//生成的html
   template: 'index2.html',//来源html
   inject: true,//是否开启注入
   chunks: ['app2']//需要引入的Chunk,不配置就会引入所有页面的资源
  }),
  // 多页:index3.html → app3.js
  new HtmlWebpackPlugin({
   filename: 'index3.html',//生成的html
   template: 'index3.html',//来源html
   inject: true,//是否开启注入
   chunks: ['app3']//需要引入的Chunk,不配置就会引入所有页面的资源
  })
]

run build 編譯

修改config/index.js

開啟~\config\index.js,找到build下的index: path.resolve(__dirname, '../dist/index.html') ,在其後加入多頁

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

##開啟~\build\webpack.prod.conf.js,在plugins下找到new HtmlWebpackPlugin,在其後面加入對應的多頁,並為每個頁面新增Chunk設定

HtmlWebpackPlugin 中的filename 引用的是config/index.js 中對應的build

plugins: [
  // 多页: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,不配置就会引入所有页面的资源
  }),
  // 多页: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,不配置就会引入所有页面的资源
  }),
  // 多页: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,不配置就会引入所有页面的资源
  }),
]

如果頁面比較多,可以考慮使用循環將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(&#39;^&#39; + pathDir), &#39;&#39;) : pathname;
    entries[pathname] = [&#39;./&#39; + entry];
  }
  return entries;
}
// webpack.base.conf.js
var pages = Object.keys(utils.getEntry(&#39;../src/views/**/*.html&#39;, &#39;../src/views/&#39;));
pages.forEach(function (pathname) {
  // https://github.com/ampedandwired/html-webpack-plugin
  var conf = {
    filename: &#39;../views/&#39; + pathname + &#39;.html&#39;, //生成的html存放路径,相对于path
    template: &#39;../src/views/&#39; + pathname + &#39;.html&#39;, //html模板路径
    inject: false,  //js插入的位置,true/&#39;head&#39;/&#39;body&#39;/false
    /*
     * 压缩这块,调用了html-minify,会导致压缩时候的很多html语法检查问题,
     * 如在html标签属性上使用{{...}}表达式,所以很多情况下并不需要在此配置压缩项,
     * 另外,UglifyJsPlugin会在压缩代码的时候连同html一起压缩。
     * 为避免压缩html,需要在html-loader上配置&#39;html?-minimize&#39;,见loaders中html-loader的配置。
     */
    // minify: { //压缩HTML文件
    //   removeComments: true, //移除HTML中的注释
    //   collapseWhitespace: false //删除空白符与换行符
    // }
  };
  if (pathname in config.entry) {
    conf.favicon = &#39;src/images/favicon.ico&#39;;
    conf.inject = &#39;body&#39;;
    conf.chunks = [&#39;vendors&#39;, pathname];
    conf.hash = true;
  }
  config.plugins.push(new HtmlWebpackPlugin(conf));
});

同樣入口entry 也可以使用

// webpack.base.conf.js
entry: {
  app: utils.getEntry(&#39;../src/scripts/**/*.js&#39;, &#39;../src/scripts/&#39;)
},

上面是我整理給大家的,希望今後會對大家有幫助。

相關文章:

在JS如何實作標籤滾動切換

在jQuery如何使用EasyUI window視窗

#在Angular4.0中如何使用laydate.js日期外掛程式

#使用Angular4有關圖片路徑不安全的問題

#在Webpack中如何建構Electron應用

以上是如何使用vue-cli實現多頁應用的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn