通过axios.get方式读取本地静态资源的方式解决在不改变源文件的基础上打包后动态加载问题

.electron-vue/webpack.main.config.js

@@ -7,6 +7,7 @@ const { dependencies } = require('../package.json')
 const webpack = require('webpack')
 
 const MinifyPlugin = require("babel-minify-webpack-plugin")
+const CopyWebpackPlugin = require('copy-webpack-plugin')
 
 let mainConfig = {
   entry: {
@@ -38,7 +39,14 @@ let mainConfig = {
     path: path.join(__dirname, '../dist/electron')
   },
   plugins: [
-    new webpack.NoEmitOnErrorsPlugin()
+    new webpack.NoEmitOnErrorsPlugin(),
+    new CopyWebpackPlugin([
+      {
+        from: path.resolve(__dirname, '../static'),
+        to: 'static',
+        ignore: ['.*']
+      }
+    ])
   ],
   resolve: {
     extensions: ['.js', '.json', '.node']

.electron-vue/webpack.renderer.config.js

@@ -166,10 +166,15 @@ if (process.env.NODE_ENV === 'production') {
   rendererConfig.plugins.push(
     new MinifyPlugin(),
     new CopyWebpackPlugin([
-      {
+      /*{
         from: path.join(__dirname, '../static'),
         to: path.join(__dirname, '../dist/electron/static'),
         ignore: ['.*']
+      }*/
+      {
+        from: path.resolve(__dirname, '../static'),
+        to: 'static',
+        ignore: ['.*']
       }
     ]),
     new webpack.DefinePlugin({

package.json

@@ -77,7 +77,7 @@
     "babel-register": "^6.26.0",
     "cfonts": "^2.1.2",
     "chalk": "^2.4.1",
-    "copy-webpack-plugin": "^4.5.1",
+    "copy-webpack-plugin": "^4.6.0",
     "cross-env": "^5.1.6",
     "css-loader": "^0.28.11",
     "del": "^3.0.0",

src/renderer/components/Login.vue

@@ -1,14 +1,14 @@
 <!--登录界面-->
 <template>
-    <div class="login" ref="login" :style="{backgroundColor: `#${loginJson[0].BrackgroupStr.slice(3)}`}">
+    <div class="login" ref="login" :style="{backgroundColor: `#${loginJson[0] ? loginJson[0].BrackgroupStr.slice(3) : ''}`}">
         <section class="login-content" :style="{
-            width: loginJson[0].Width + 'px',
-            height: loginJson[0].Height + 'px',
-            left:loginJson[0].Left + 'px',
-            top:loginJson[0].Top + 'px',
-            zIndex: loginJson[0].ZIndex,
-            border: `1px solid #${loginJson[0].BorderStr.slice(3)}`,
-            backgroundColor: `#${loginJson[0].ForegroundStr.slice(3)}`}">
+            width: loginJson[0] ? loginJson[0].Width + 'px' : '',
+            height: loginJson[0] ? loginJson[0].Height + 'px' : '',
+            left:loginJson[0] ? loginJson[0].Left + 'px' : '',
+            top:loginJson[0] ? loginJson[0].Top + 'px' : '',
+            zIndex: loginJson[0] ? loginJson[0].ZIndex : '',
+            border: `1px solid #${loginJson[0] ? loginJson[0].BorderStr.slice(3) : ''}`,
+            backgroundColor: `#${loginJson[0] ? loginJson[0].ForegroundStr.slice(3) : ''}`}">
             <h2>用户登录</h2>
             <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="55px" class="login-form">
                 <el-form-item label="账号" prop="username">
@@ -18,8 +18,8 @@
                     <el-input type="password" v-model="ruleForm.password" autocomplete="off" prefix-icon="el-icon-lock"></el-input>
                 </el-form-item>
                 <el-form-item>
-                    <el-button type="primary" :style="{backgroundColor: `#${loginJson[0].BTNForegroundStr.slice(3)}`}" @click="submitForm('ruleForm')">提交</el-button>
-                    <el-button type="primary" :style="{backgroundColor: `#${loginJson[0].BTNForegroundStr.slice(3)}`}" @click="resetForm('ruleForm')">重置</el-button>
+                    <el-button type="primary" :style="{backgroundColor: `#${loginJson[0] ? loginJson[0].BTNForegroundStr.slice(3) : ''}`}" @click="submitForm('ruleForm')">提交</el-button>
+                    <el-button type="primary" :style="{backgroundColor: `#${loginJson[0] ? loginJson[0].BTNForegroundStr.slice(3) : ''}`}" @click="resetForm('ruleForm')">重置</el-button>
                 </el-form-item>
             </el-form>
         </section>
@@ -30,6 +30,9 @@
     import {mapState} from 'vuex'
     import {reqLogin} from "../api"
     import storageUtils from "../../utils/storageUtils"
+    import fs from 'fs'
+    import path from 'path'
+    import axios from 'axios'
 
     export default {
         data() {
@@ -56,11 +59,25 @@
                         { validator: validatePasswrod, trigger: 'blur' }
                     ]
                 },
+                loginJson:[]
             }
         },
 
+        beforeCreate() {
+            /*fs.readFile(path.join(__static, '/EnityLogin.json'), 'utf8',(err,data) => {
+                this.loginJson = data
+            })*/
+
+            axios.get('static/EnityLogin.json').then(res => {
+                if (res.status === 200) {
+                    this.loginJson = res.data
+                }
+            })
+
+        },
+
         computed: {
-            ...mapState(['loginJson'])
+            // ...mapState(['loginJson'])
         },
 
         methods: {

src/renderer/store/state.js

@@ -23,7 +23,7 @@ export default {
   deviceJson:[],
 
   // 登录
-  loginJson:EnityLogin,
+  loginJson:[],
 
   // window窗口
   windowJson:EnityWindow,

static/EnityLogin.json

@@ -0,0 +1,35 @@
+[
+    {
+        "IsBorder":true,
+        "BorderStr":"#FFFFFFFF",
+        "ForegroundStr":"#FFD6D6D6",
+        "BTNForegroundStr":"#FF000000",
+        "BrackgroupStr":"#FF03A9F4",
+        "BackIconObjID":"",
+        "BackIcon":null,
+        "ActionIconObjID":"",
+        "ActionIcon":null,
+        "FontSize":16,
+        "IsPanel":false,
+        "ValidatType":1,
+        "EnityName":"Login",
+        "VerifyPassActionList":[
+
+        ],
+        "ID":"cb3c80b1-f1e4-459d-88ae-e2979666b5e3",
+        "Name":"V1--Login0",
+        "Left":294,
+        "Top":194,
+        "Width":411,
+        "Height":266,
+        "ZIndex":20100,
+        "GroupNumber":"",
+        "IsRunVisiable":true,
+        "IsVisibility":false,
+        "isSyn":false,
+        "WindowID":"b7872c9a-45ec-46c6-a388-f8d364a9f2d7",
+        "PanelID":null,
+        "IsLock":false,
+        "IsWindow":false
+    }
+]