Vue 多頁面配置

1.vue.config.js多頁面配置添加

vue官網參考文檔

let glob = require('glob')
//配置pages多頁面獲取當前文件夾下的html和js
function getEntry(globPath) {
 let entries = {},
  basename, tmp, pathname, appname;

 glob.sync(globPath).forEach(function (entry) {
  basename = path.basename(entry, path.extname(entry));
  // console.log(entry)
  tmp = entry.split('/').splice(-3);
  // console.log(tmp)
  pathname = basename; // 正確輸出js和html的路徑

  // console.log(pathname)
  entries[pathname] = {
   entry: 'src/' + tmp[0] + '/' + tmp[1] + '/' + tmp[1] + '.js',
   template: 'src/' + tmp[0] + '/' + tmp[1] + '/' + tmp[2],
   title: tmp[1],
   filename: tmp[2],
   // chunks: [tmp[1]],
   cdn: process.env.NODE_ENV === 'production' ? cdn.build : cdn.dev
  };
 });
 return entries;
}

let pages = getEntry('./src/module/**?/*.html');//多頁面包裹目錄
// console.log(pages)
複製代碼

cdn抽離

經過以上代碼咱們看到，採用 glob 來對目錄進行查詢，然後經過 html-webpack-plugin 來實現了多頁面html文件的建立。

vue官網參考文檔

html-webpack-plugin配置選項

而咱們如今要作的是添加一個自定義選項 cdn ,傳遞給 html-webpack-plugin以便於在編譯的時候自動加入咱們所需的 css 、js 文件連接。

const cdn = {
 // 開發環境
 dev: {
  css: [],
  js: [
   // 'https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.min.js',
   // 'https://cdn.jsdelivr.net/npm/axios@0.19.0/dist/axios.min.js'
  ]
 },
 // 生產環境
 build: {
  css: [],
  js: [
   'https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.min.js',
   'https://cdn.jsdelivr.net/npm/axios@0.19.0/dist/axios.min.js'
  ]
 }
}
複製代碼

html文件cdn配置

<!-- 使用CDN加速的CSS文件，配置在vue.config.js下 -->
<% for (var i in htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.css) { %>
    <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="preload" as="style" />
    <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="stylesheet" />
<% } %>
<!-- 使用CDN加速的JS文件，配置在vue.config.js下 -->
<% for (var i in htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.js) { %>
    <script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
<% } %>
複製代碼

生產環境排除依賴項

webpack官網參考文檔

// externals裏的模塊不打包
Object.assign(config, {
  externals:{
    vue: 'Vue',
    axios: 'axios'
  }
})
複製代碼

其它參考連接

Vue的compiler模式和runtime模式

JSP示例文檔