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示例文档