多页面不同环境下可配置

hookehuyr
Commit 8908b5b469d179c3afc749c9461b3d83521b91d8 8908b5b4 1 parent a3dd568a
Showing 5 changed files with 77 additions and 58 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,53 +40,63 @@ 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'];
-module.exports = {
+// 多页模板页
-  // 基本路径
+var pages = {
-  publicPath: process.env.NODE_ENV === 'production' ? '/boh/' : '/',
+  // 默认页
-  // 输出文件目录
-  outputDir: 'dist',
-  // 放置生成的静态资源的目录
-  assetsDir: '',
-  // 指定生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径。
-  indexPath: 'index.html',
-  filenameHashing: true,
-  pages: {
   index: {
-      // page 的入口
+    entry: 'src/index.js',
-      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: {
+};
+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/login/login.js',
+      entry: `src/multiPages/${array[i].page}/${array[i].page}.js`,
       // 模板来源
-      template: 'public/login.html',
+      template: `public/${array[i].page}.html`,
       // 在 dist/index.html 的输出
-      filename: 'login.html',
+      filename: `${array[i].page}.html`,
       // 当使用 title 选项时，
       // template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
-      title: '登录页',
+      title: `${array[i].title}`,
       // 在这个页面中包含的块，默认情况下会包含
       // 提取出来的通用 chunk 和 vendor chunk。
-      chunks: ['chunk-vendors', 'chunk-common', 'login']
+      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 = {
+  // 基本路径
+  publicPath: process.env.NODE_ENV === 'production' ? '/boh/' : '/',
+  // 输出文件目录
+  outputDir: 'dist',
+  // 放置生成的静态资源的目录
+  assetsDir: '',
+  // 指定生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径。
+  indexPath: 'index.html',
+  filenameHashing: true,
+  pages,
   // 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) {
+        config.plugins.push(
           new CompressionWebpackPlugin({
             test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
             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: {
   // ...
   }
-}
+};