修正当选择为web打包时出现报错得问题

张恒
.electron-vue/webpack.web.config.js
README.md
package-lock.json
src/renderer/components/LandingPage.vue
src/renderer/components/LandingPage/SystemInformation.vue
src/renderer/components/title/index.vue
src/renderer/main.js
--- a/.electron-vue/webpack.web.config.js
查看文件 @0109f74
+++ b/.electron-vue/webpack.web.config.js
查看文件 @0109f74
@@ -9,6 +9,7 @@ const MinifyPlugin = require("babel-minify-webpack-plugin");
 const CopyWebpackPlugin = require('copy-webpack-plugin')
 const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
+const TerserPlugin = require('terser-webpack-plugin');
 const { VueLoaderPlugin } = require('vue-loader')
 function resolve(dir) {
@@ -87,6 +88,7 @@ let webConfig = {
         use: {
           loader: 'url-loader',
           query: {
+            esModule: false,
             limit: 10000,
             name: 'imgs/[name].[ext]'
           }
@@ -97,6 +99,7 @@ let webConfig = {
         use: {
           loader: 'url-loader',
           query: {
+            esModule: false,
             limit: 10000,
             name: 'fonts/[name].[ext]'
           }
@@ -159,6 +162,50 @@ if (process.env.NODE_ENV === 'production') {
       minimize: true
     })
   )
+  webConfig.optimization = {
+    splitChunks: {
+      chunks: "async",
+      cacheGroups: {
+        vendor: { // 将第三方模块提取出来
+          minSize: 30000,
+          minChunks: 1,
+          test: /node_modules/,
+          chunks: 'initial',
+          name: 'vendor',
+          priority: 1
+        },
+        commons: {
+          test: /[\\/]src[\\/]common[\\/]/,
+          name: 'commons',
+          minSize: 30000,
+          minChunks: 3,
+          chunks: 'initial',
+          priority: -1,
+          reuseExistingChunk: true // 这个配置允许我们使用已经存在的代码块
+        }
+      }
+    },
+    runtimeChunk: { name: 'runtime' },
+    minimizer: [
+      new TerserPlugin({
+        test: /\.js(\?.*)?$/i,
+        extractComments: false,
+        cache: false,
+        sourceMap: false,
+        terserOptions: {
+          warnings: false,
+          compress: {
+            warnings: false,
+            drop_console: true,
+            drop_debugger: true,
+            pure_funcs: ['console.log']
+          },
+          output: {
+            comments: false,
+        },
+        }
+      })]
+  }
 }
 module.exports = webConfig
--- a/README.md
查看文件 @0109f74
+++ b/README.md
查看文件 @0109f74
@@ -42,6 +42,7 @@ npm config edit
 这是花裤衩大大原本的[地址](https://github.com/PanJiaChen/electron-vue-admin)
 # 更新日志
+- 2020年04月29日：添加了路由多窗口示例，修复web打包，提升依赖；文档还未就绪
 - 2020年02月09日：添加[中文在线文档](https://umbrella22.github.io/electron-vue-template-doc/)，[国内访问地址](https://zh-sky.gitee.io/electron-vue-template-doc/)
 - 剔除win打包依赖，因为太大了，将它放到码云的额外仓库中，[地址](https://gitee.com/Zh-Sky/HardToDownloadLib)
 - 2020年02月06日更新：激进分支更新至8.0.0.
--- a/package-lock.json
查看文件 @0109f74
+++ b/package-lock.json
查看文件 @0109f74
@@ -9700,7 +9700,7 @@
     },
     "matcher": {
       "version": "2.1.0",
-      "resolved": "https://registry.npm.taobao.org/matcher/download/matcher-2.1.0.tgz",
+      "resolved": "https://registry.npm.taobao.org/matcher/download/matcher-2.1.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fmatcher%2Fdownload%2Fmatcher-2.1.0.tgz",
       "integrity": "sha1-ZOEEHBW5k+I7eG+TMgp0dL+DPCg=",
       "dev": true,
       "optional": true,
@@ -9710,7 +9710,7 @@
       "dependencies": {
         "escape-string-regexp": {
           "version": "2.0.0",
-          "resolved": "https://registry.npm.taobao.org/escape-string-regexp/download/escape-string-regexp-2.0.0.tgz",
+          "resolved": "https://registry.npm.taobao.org/escape-string-regexp/download/escape-string-regexp-2.0.0.tgz?cache=0&sync_timestamp=1586278520081&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fescape-string-regexp%2Fdownload%2Fescape-string-regexp-2.0.0.tgz",
           "integrity": "sha1-owME6Z2qMuI7L9IPUbq9B8/8o0Q=",
           "dev": true,
           "optional": true
@@ -11402,7 +11402,7 @@
     },
     "posthtml": {
       "version": "0.9.2",
-      "resolved": "https://registry.npm.taobao.org/posthtml/download/posthtml-0.9.2.tgz",
+      "resolved": "https://registry.npm.taobao.org/posthtml/download/posthtml-0.9.2.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fposthtml%2Fdownload%2Fposthtml-0.9.2.tgz",
       "integrity": "sha1-9MBtufZ7Yf0XxOJW5+PZUVv3Jv0=",
       "dev": true,
       "requires": {
--- a/src/renderer/components/LandingPage.vue
查看文件 @0109f74
+++ b/src/renderer/components/LandingPage.vue
查看文件 @0109f74
@@ -54,7 +54,6 @@
 <script>
 import SystemInformation from "./LandingPage/SystemInformation";
-import ipcApi from "../utils/ipcRenderer";
 import { message } from "@/api/login";
 export default {
   name: "landing-page",
@@ -87,7 +86,7 @@ export default {
       let data = {
         url:'/form/index'
       }
-      ipcApi.send("open-win", data);
+      this.$ipcApi.send("open-win", data);
     },
     getMessage() {
       message().then(res => {
@@ -97,8 +96,8 @@ export default {
       });
     },
     StartServer() {
-      ipcApi.send("statr-server");
+      this.$ipcApi.send("statr-server");
-      ipcApi.on("confirm-start", (event, arg) => {
+      this.$ipcApi.on("confirm-start", (event, arg) => {
         console.log(arg);
         this.$message({
           type: "success",
@@ -137,8 +136,8 @@ export default {
         noLink: true,
         message: "此操作会清空本地数据库中的所有数据，是否继续？"
       };
-      ipcApi.send("open-messagebox", data);
+      this.$ipcApi.send("open-messagebox", data);
-      ipcApi.on("confirm-message", (event, arg) => {
+      this.$ipcApi.on("confirm-message", (event, arg) => {
         console.log(arg);
         if (arg.response === 0) {
           this.$db.deleall({ name: "yyy" }).then(res => {
@@ -154,7 +153,7 @@ export default {
                 title: "错误",
                 message: "已经没有数据可以被删除！"
               };
-              ipcApi.send("open-errorbox", errormsg);
+              this.$ipcApi.send("open-errorbox", errormsg);
             }
           });
         }
@@ -164,9 +163,9 @@ export default {
       switch (data) {
         case "one":
           const dialog = this.$electron.remote.dialog;
-          ipcApi.send("check-update");
+          this.$ipcApi.send("check-update");
           console.log("启动检查");
-          ipcApi.on("UpdateMsg", (event, data) => {
+          this.$ipcApi.on("UpdateMsg", (event, data) => {
             console.log(data);
             switch (data.state) {
               case -1:
@@ -196,7 +195,7 @@ export default {
                 this.$alert("更新下载完成！", "提示", {
                   confirmButtonText: "确定",
                   callback: action => {
-                    ipcApi.send("confirm-update");
+                    this.$ipcApi.send("confirm-update");
                   }
                 });
                 break;
@@ -208,34 +207,34 @@ export default {
           break;
         case "two":
           console.log(111);
-          ipcApi.send("start-download");
+          this.$ipcApi.send("start-download");
-          ipcApi.on("confirm-download", (event, arg) => {
+          this.$ipcApi.on("confirm-download", (event, arg) => {
             if (arg) {
               this.dialogVisible = true;
             }
           });
-          ipcApi.on("download-progress", (event, arg) => {
+          this.$ipcApi.on("download-progress", (event, arg) => {
             this.percentage = Number(arg);
           });
-          ipcApi.on("download-error", (event, arg) => {
+          this.$ipcApi.on("download-error", (event, arg) => {
             if (arg) {
               this.progressStaus = "exception";
               this.percentage = 40;
               this.colors = "#d81e06";
             }
           });
-          ipcApi.on("download-paused", (event, arg) => {
+          this.$ipcApi.on("download-paused", (event, arg) => {
             if (arg) {
               this.progressStaus = "warning";
               this.$alert("下载由于未知原因被中断！", "提示", {
                 confirmButtonText: "重试",
                 callback: action => {
-                  ipcApi.send("satrt-download");
+                  this.$ipcApi.send("satrt-download");
                 }
               });
             }
           });
-          ipcApi.on("download-done", (event, age) => {
+          this.$ipcApi.on("download-done", (event, age) => {
             this.filePath = age.filePath;
             this.progressStaus = "success";
             this.$alert("更新下载完成！", "提示", {
@@ -256,12 +255,12 @@ export default {
     }
   },
   destroyed() {
-    ipcApi.remove("confirm-message");
+    this.$ipcApi.remove("confirm-message");
-    ipcApi.remove("download-done");
+    this.$ipcApi.remove("download-done");
-    ipcApi.remove("download-paused");
+    this.$ipcApi.remove("download-paused");
-    ipcApi.remove("confirm-download");
+    this.$ipcApi.remove("confirm-download");
-    ipcApi.remove("download-progress");
+    this.$ipcApi.remove("download-progress");
-    ipcApi.remove("download-error");
+    this.$ipcApi.remove("download-error");
   }
 };
 </script>
--- a/src/renderer/components/LandingPage/SystemInformation.vue
查看文件 @0109f74
+++ b/src/renderer/components/LandingPage/SystemInformation.vue
查看文件 @0109f74
@@ -35,49 +35,51 @@
 </template>
 <script>
-  export default {
+export default {
-    data () {
+  data() {
     return {
-        electron: process.versions.electron,
+      electron: process.versions.electron || "浏览器环境",
       name: this.$route.name,
-        node: process.versions.node,
+      node: process.versions.node || "浏览器环境",
       path: this.$route.path,
-        platform: require('os').platform(),
+      platform: require("os").platform(),
-        arch:require('os').arch(),
+      arch: require("os").arch(),
-        vue: require('vue/package.json').version
+      vue: require("vue/package.json").version
-      }
+    };
   },
-    mounted(){
+  mounted() {
-      console.log(this.$route)
+    console.log(this.$route);
-    }
   }
+};
 </script>
 <style scoped>
-  .title {
+.title {
   color: #888;
   font-size: 18px;
   font-weight: initial;
-    letter-spacing: .25px;
+  letter-spacing: 0.25px;
   margin-top: 10px;
-  }
+}
-  .items { margin-top: 8px; }
+.items {
+  margin-top: 8px;
+}
-  .item {
+.item {
   display: flex;
   align-items: center;
   margin-bottom: 6px;
   line-height: 24px;
-  }
+}
-  .item .name {
+.item .name {
   color: #6a6a6a;
   margin-right: 6px;
-  }
+}
-  .item .value {
+.item .value {
   color: #35495e;
   font-weight: bold;
-  }
+}
 </style>
--- a/src/renderer/components/title/index.vue
查看文件 @0109f74
+++ b/src/renderer/components/title/index.vue
查看文件 @0109f74
 <!--  -->
 <template>
-  <div class="window-title" v-if="!IsUseSysTitle&&isMac">
+  <div class="window-title" v-if="!IsUseSysTitle&&isMac&&!IsWeb">
     <!-- 软件logo预留位置 -->
     <div style="-webkit-app-region: drag;" class="logo">
       <svg-icon icon-class="electron-logo"></svg-icon>
@@ -25,32 +25,35 @@
 </template>
 <script>
-import ipcApi from "@/utils/ipcRenderer";
 export default {
   data: () => ({
     mix: false,
     IsUseSysTitle: false,
-    isMac:process.platform !== 'darwin'
+    isMac: process.platform !== "darwin",
+    IsWeb: process.env.IS_WEB
   }),
   components: {},
   created() {
-    ipcApi.send("IsUseSysTitle");
+    this.$ipcApi.send("IsUseSysTitle");
-    ipcApi.on("CisUseSysTitle", (event, arg) => (this.IsUseSysTitle = arg));
+    this.$ipcApi.on(
+      "CisUseSysTitle",
+      (event, arg) => (this.IsUseSysTitle = arg)
+    );
   },
   mounted() {},
   methods: {
     Mini() {
-      ipcApi.send("windows-mini");
+      this.$ipcApi.send("windows-mini");
     },
     MixOrReduction() {
-      ipcApi.send("window-max");
+      this.$ipcApi.send("window-max");
-      ipcApi.on("window-confirm", (event, arg) => (this.mix = arg));
+      this.$ipcApi.on("window-confirm", (event, arg) => (this.mix = arg));
     },
     Close() {
-      ipcApi.send("window-close");
+      this.$ipcApi.send("window-close");
     }
   }
 };
@@ -69,7 +72,7 @@ export default {
   .title {
     text-align: center;
   }
-  .logo{
+  .logo {
     margin-left: 20px;
   }
   .controls-container {
--- a/src/renderer/main.js
查看文件 @0109f74
+++ b/src/renderer/main.js
查看文件 @0109f74
@@ -3,8 +3,6 @@ import Vue from 'vue'
 import App from './App'
 import router from './router'
 import store from './store'
-// 导入数据操作库
-import db from './api/operationalData'
 // 引用element
 import ElementUI from 'element-ui'
 import 'element-ui/lib/theme-chalk/index.css'
@@ -14,14 +12,18 @@ import './error'
 import './icons'
 import '@/styles/index.scss'
-if (!require('../../config').IsUseSysTitle) require('@/styles/custom-title.scss')
+if (!process.env.IS_WEB) {
-
+  Vue.use(require('vue-electron'))
-if (!process.env.IS_WEB) Vue.use(require('vue-electron'))
+  if (!require('../../config').IsUseSysTitle) {
+    require('@/styles/custom-title.scss')
+  }
+  // 当处于electron状态下才引用db
+  Vue.prototype.$db = require('./api/operationalData').default
+  Vue.prototype.$ipcApi = require('./utils/ipcRenderer').default
+}
 Vue.use(ElementUI)
-Vue.prototype.$db = db
-
 Vue.config.productionTip = false
 /* eslint-disable no-new */
 const vue = new Vue({