多页面不同环境下可配置

hookehuyr
Commit 8908b5b469d179c3afc749c9461b3d83521b91d8 8908b5b4 1 parent a3dd568a
Showing 5 changed files with 85 additions and 66 deletions
config/dev-custom.js
config/prod-custom.js
package.json
src/main.js → src/index.js
vue.config.js
--- a/config/dev-custom.js 0 → 100644
View file @8908b5b
+++ b/config/dev-custom.js 0 → 100644
View file @8908b5b
+var dev = [{
+  title: '登录页',
+  page: 'login'
+}];
+
+module.exports = dev;
--- a/config/prod-custom.js 0 → 100644
View file @8908b5b
+++ b/config/prod-custom.js 0 → 100644
View file @8908b5b
+var prod = [{
+  title: '登录页',
+  page: 'login'
+}];
+
+module.exports = prod;
--- a/package.json
View file @8908b5b
+++ b/package.json
View file @8908b5b
@@ -5,7 +5,8 @@
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint"
+    "lint": "vue-cli-service lint",
+    "rm": "rm -rf dist/"
   },
   "dependencies": {
     "axios": "^0.18.0",
--- a/src/main.js → src/index.js
View file @8908b5b
+++ b/src/main.js → src/index.js
View file @8908b5b
--- a/vue.config.js
View file @8908b5b
+++ b/vue.config.js
View file @8908b5b
 /* jshint esversion: 6 */
-const path = require('path')
+const path = require('path');
-const webpack = require('webpack')
+const webpack = require('webpack');
-const CompressionWebpackPlugin = require('compression-webpack-plugin')
+const CompressionWebpackPlugin = require('compression-webpack-plugin');
 // function resolve (dir) {
 //   return path.join(__dirname, './', dir)
@@ -17,7 +17,7 @@ const externals = {
   '$': 'jquery',
   'jquery': 'Jquery',
   'moment': 'moment'
-}
+};
 const cdn = {
   // 开发环境
@@ -40,12 +40,51 @@ const cdn = {
       'https://cdn.jsdelivr.net/npm/moment@2.23.0/moment.min.js'
     ]
   }
-}
+};
 // 是否使用gzip
-const productionGzip = true
+const productionGzip = true;
 // 需要gzip压缩的文件后缀
-const productionGzipExtensions = ['js', 'css']
+const productionGzipExtensions = ['js', 'css'];
+
+// 多页模板页
+var pages = {
+  // 默认页
+  index: {
+    entry: 'src/index.js',
+    template: 'public/index.html',
+    filename: 'index.html',
+    title: 'Index Page',
+    chunks: ['chunk-vendors', 'chunk-common', 'index']
+  }
+};
+var prod_custom = require('./config/prod-custom');
+var dev_custom = require('./config/dev-custom');
+function getEntryPages (array) {
+  for (let i = 0; i < array.length; i++) {
+    pages[array[i].page] = {
+      // page 的入口
+      entry: `src/multiPages/${array[i].page}/${array[i].page}.js`,
+      // 模板来源
+      template: `public/${array[i].page}.html`,
+      // 在 dist/index.html 的输出
+      filename: `${array[i].page}.html`,
+      // 当使用 title 选项时，
+      // template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
+      title: `${array[i].title}`,
+      // 在这个页面中包含的块，默认情况下会包含
+      // 提取出来的通用 chunk 和 vendor chunk。
+      chunks: ['chunk-vendors', 'chunk-common', array[i].page]
+    };
+  }
+  return pages;
+}
+if (process.env.NODE_ENV === 'production') {
+  pages = getEntryPages(prod_custom);
+}
+if (process.env.NODE_ENV === 'development') {
+  pages = getEntryPages(dev_custom);
+}
 module.exports = {
   // 基本路径
@@ -57,36 +96,7 @@ module.exports = {
   // 指定生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径。
   indexPath: 'index.html',
   filenameHashing: true,
-  pages: {
+  pages,
-    index: {
-      // page 的入口
-      entry: 'src/main.js',
-      // 模板来源
-      template: 'public/index.html',
-      // 在 dist/index.html 的输出
-      filename: 'index.html',
-      // 当使用 title 选项时，
-      // template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
-      title: 'Index Page',
-      // 在这个页面中包含的块，默认情况下会包含
-      // 提取出来的通用 chunk 和 vendor chunk。
-      chunks: ['chunk-vendors', 'chunk-common', 'index']
-    },
-    login: {
-      // page 的入口
-      entry: 'src/multiPages/login/login.js',
-      // 模板来源
-      template: 'public/login.html',
-      // 在 dist/index.html 的输出
-      filename: 'login.html',
-      // 当使用 title 选项时，
-      // template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
-      title: '登录页',
-      // 在这个页面中包含的块，默认情况下会包含
-      // 提取出来的通用 chunk 和 vendor chunk。
-      chunks: ['chunk-vendors', 'chunk-common', 'login']
-    }
-  },
   // eslint-loader 是否在保存的时候检查
   lintOnSave: 'error',
   // 是否使用包含运行时编译器的 Vue 构建版本。设置为 true 后你就可以在 Vue 组件中使用 template 选项了。
@@ -105,25 +115,27 @@ module.exports = {
         'axios': 'axios',
         'moment': 'moment'
       })
-    )
+    );
-    config.resolve.extensions.push('.less')
+    config.resolve.extensions.push('.less');
-    config.resolve.extensions.push('.css')
+    config.resolve.extensions.push('.css');
     //
-    config.resolve.alias.src = path.resolve(__dirname, './src/src')
+    config.resolve.alias.src = path.resolve(__dirname, './src/src');
-    config.resolve.alias.assets = path.resolve(__dirname, './src/assets')
+    config.resolve.alias.assets = path.resolve(__dirname, './src/assets');
-    config.resolve.alias.components = path.resolve(__dirname, './src/components')
+    config.resolve.alias.components = path.resolve(__dirname, './src/components');
     // 修改webpack config, 使其不打包externals下的资源
     if (process.env.NODE_ENV === 'production') {
       // 1. 生产环境npm包转CDN
-      config.externals = externals
+      config.externals = externals;
       // 2. 构建时开启gzip，降低服务器压缩对CPU资源的占用，服务器也要相应开启gzip
-      productionGzip && config.plugins.push(
+      if (productionGzip) {
-        new CompressionWebpackPlugin({
+        config.plugins.push(
-          test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
+          new CompressionWebpackPlugin({
-          threshold: 8192,
+            test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
-          minRatio: 0.8
+            threshold: 8192,
-        })
+            minRatio: 0.8
-      )
+          })
+        );
+      }
     }
     if (process.env.NODE_ENV === 'development') {
     }
@@ -138,25 +150,19 @@ module.exports = {
       .plugin('html-index')
       .tap(args => {
         if (process.env.NODE_ENV === 'production') {
-          args[0].cdn = cdn.build
+          args[0].cdn = cdn.build;
         }
-        if (process.env.NODE_ENV === 'development') {
+        return args;
-          args[0].cdn = cdn.dev
-        }
-        return args
       })
       .end()
       .plugin('html-login')
       .tap(args => {
         if (process.env.NODE_ENV === 'production') {
-          args[0].cdn = cdn.build
+          args[0].cdn = cdn.build;
-        }
-        if (process.env.NODE_ENV === 'development') {
-          args[0].cdn = cdn.dev
         }
-        return args
+        return args;
       })
-      .end()
+      .end();
   },
   // css相关配置
   css: {
@@ -201,8 +207,8 @@ module.exports = {
           '^/(.*)': '/$1'
         },
         onProxyReq: function (proxyReq, req, res, options) {
-          proxyReq.setHeader('X-Proxy-Host', req.header('host'))
+          proxyReq.setHeader('X-Proxy-Host', req.header('host'));
-          proxyReq.setHeader('X-Proxy-Request-URI', req.url)
+          proxyReq.setHeader('X-Proxy-Request-URI', req.url);
         }
       }
     },
@@ -216,4 +222,4 @@ module.exports = {
   pluginOptions: {
   // ...
   }
-}
+};