术习电报 / electron-vue-template

转到一个项目
切换导航栏
切换导航栏固定状态
张恒
e8217f96 1 个父辈 3d6d797c

升级依赖，修正web打包失败

全部展开
内嵌 并排
正在显示 8 个修改的文件 包含 134 行增加 和 80 行删除
...@@ -9,6 +9,7 @@ const MinifyPlugin = require("babel-minify-webpack-plugin"); ...@@ -9,6 +9,7 @@ const MinifyPlugin = require("babel-minify-webpack-plugin");
9 const CopyWebpackPlugin = require('copy-webpack-plugin') 9 const CopyWebpackPlugin = require('copy-webpack-plugin')
10 const MiniCssExtractPlugin = require('mini-css-extract-plugin') 10 const MiniCssExtractPlugin = require('mini-css-extract-plugin')
11 const HtmlWebpackPlugin = require('html-webpack-plugin') 11 const HtmlWebpackPlugin = require('html-webpack-plugin')
12 +const TerserPlugin = require('terser-webpack-plugin');
12 const { VueLoaderPlugin } = require('vue-loader') 13 const { VueLoaderPlugin } = require('vue-loader')
13 14
14 function resolve(dir) { 15 function resolve(dir) {
...@@ -87,6 +88,7 @@ let webConfig = { ...@@ -87,6 +88,7 @@ let webConfig = {
87 use: { 88 use: {
88 loader: 'url-loader', 89 loader: 'url-loader',
89 query: { 90 query: {
91 + esModule: false,
90 limit: 10000, 92 limit: 10000,
91 name: 'imgs/[name].[ext]' 93 name: 'imgs/[name].[ext]'
92 } 94 }
...@@ -97,6 +99,7 @@ let webConfig = { ...@@ -97,6 +99,7 @@ let webConfig = {
97 use: { 99 use: {
98 loader: 'url-loader', 100 loader: 'url-loader',
99 query: { 101 query: {
102 + esModule: false,
100 limit: 10000, 103 limit: 10000,
101 name: 'fonts/[name].[ext]' 104 name: 'fonts/[name].[ext]'
102 } 105 }
...@@ -159,6 +162,50 @@ if (process.env.NODE_ENV === 'production') { ...@@ -159,6 +162,50 @@ if (process.env.NODE_ENV === 'production') {
159 minimize: true 162 minimize: true
160 }) 163 })
161 ) 164 )
165 + webConfig.optimization = {
166 + splitChunks: {
167 + chunks: "async",
168 + cacheGroups: {
169 + vendor: { // 将第三方模块提取出来
170 + minSize: 30000,
171 + minChunks: 1,
172 + test: /node_modules/,
173 + chunks: 'initial',
174 + name: 'vendor',
175 + priority: 1
176 + },
177 + commons: {
178 + test: /[\\/]src[\\/]common[\\/]/,
179 + name: 'commons',
180 + minSize: 30000,
181 + minChunks: 3,
182 + chunks: 'initial',
183 + priority: -1,
184 + reuseExistingChunk: true // 这个配置允许我们使用已经存在的代码块
185 + }
186 + }
187 + },
188 + runtimeChunk: { name: 'runtime' },
189 + minimizer: [
190 + new TerserPlugin({
191 + test: /\.js(\?.*)?$/i,
192 + extractComments: false,
193 + cache: false,
194 + sourceMap: false,
195 + terserOptions: {
196 + warnings: false,
197 + compress: {
198 + warnings: false,
199 + drop_console: true,
200 + drop_debugger: true,
201 + pure_funcs: ['console.log']
202 + },
203 + output: {
204 + comments: false,
205 + },
206 + }
207 + })]
208 + }
162 } 209 }
163 210
164 module.exports = webConfig 211 module.exports = webConfig
......
...@@ -50,6 +50,7 @@ npm config edit ...@@ -50,6 +50,7 @@ npm config edit
50 这是花裤衩大大原本的[地址](https://github.com/PanJiaChen/electron-vue-admin) 50 这是花裤衩大大原本的[地址](https://github.com/PanJiaChen/electron-vue-admin)
51 51
52 # 更新日志 52 # 更新日志
53 +- 2020年04月29日：修复web打包失败，提升依赖；文档待完善
53 - 2020年02月09日：添加[中文在线文档](https://umbrella22.github.io/electron-vue-template-doc/)，[国内访问地址](https://zh-sky.gitee.io/electron-vue-template-doc/) 54 - 2020年02月09日：添加[中文在线文档](https://umbrella22.github.io/electron-vue-template-doc/)，[国内访问地址](https://zh-sky.gitee.io/electron-vue-template-doc/)
54 - 剔除win打包依赖，因为太大了，将它放到码云的额外仓库中，[地址](https://gitee.com/Zh-Sky/HardToDownloadLib) 55 - 剔除win打包依赖，因为太大了，将它放到码云的额外仓库中，[地址](https://gitee.com/Zh-Sky/HardToDownloadLib)
55 - 2020年02月06日更新：激进分支更新至8.0.0. 56 - 2020年02月06日更新：激进分支更新至8.0.0.
......
...@@ -72,7 +72,7 @@ ...@@ -72,7 +72,7 @@
72 "dependencies": { 72 "dependencies": {
73 "axios": "^0.19.2", 73 "axios": "^0.19.2",
74 "date-fns": "^2.12.0", 74 "date-fns": "^2.12.0",
75 - "electron-updater": "^4.2.5", 75 + "electron-updater": "^4.3.1",
76 "element-ui": "^2.13.1", 76 "element-ui": "^2.13.1",
77 "express": "^4.17.1", 77 "express": "^4.17.1",
78 "fs-extra": "^9.0.0", 78 "fs-extra": "^9.0.0",
...@@ -138,11 +138,11 @@ ...@@ -138,11 +138,11 @@
138 "multispinner": "^0.2.1", 138 "multispinner": "^0.2.1",
139 "node-loader": "^0.6.0", 139 "node-loader": "^0.6.0",
140 "node-sass": "^4.14.0", 140 "node-sass": "^4.14.0",
141 - "portfinder": "^1.0.25", 141 + "portfinder": "^1.0.26",
142 "sass-loader": "^8.0.2", 142 "sass-loader": "^8.0.2",
143 "split2": "^3.1.1", 143 "split2": "^3.1.1",
144 - "style-loader": "^1.2.0", 144 + "style-loader": "^1.2.1",
145 - "svg-sprite-loader": "^4.2.6", 145 + "svg-sprite-loader": "^4.2.7",
146 "terser-webpack-plugin": "^2.3.6", 146 "terser-webpack-plugin": "^2.3.6",
147 "through2-filter": "^3.0.0", 147 "through2-filter": "^3.0.0",
148 "url-loader": "^4.1.0", 148 "url-loader": "^4.1.0",
......
...@@ -53,7 +53,6 @@ ...@@ -53,7 +53,6 @@
53 53
54 <script> 54 <script>
55 import SystemInformation from "./LandingPage/SystemInformation"; 55 import SystemInformation from "./LandingPage/SystemInformation";
56 -import ipcApi from "../utils/ipcRenderer";
57 import { message } from "@/api/login"; 56 import { message } from "@/api/login";
58 export default { 57 export default {
59 name: "landing-page", 58 name: "landing-page",
...@@ -90,8 +89,8 @@ export default { ...@@ -90,8 +89,8 @@ export default {
90 }); 89 });
91 }, 90 },
92 StartServer() { 91 StartServer() {
93 - ipcApi.send("statr-server"); 92 + this.$ipcApi.send("statr-server");
94 - ipcApi.on("confirm-start", (event, arg) => { 93 + this.$ipcApi.on("confirm-start", (event, arg) => {
95 console.log(arg); 94 console.log(arg);
96 this.$message({ 95 this.$message({
97 type: "success", 96 type: "success",
...@@ -130,8 +129,8 @@ export default { ...@@ -130,8 +129,8 @@ export default {
130 noLink: true, 129 noLink: true,
131 message: "此操作会清空本地数据库中的所有数据，是否继续？" 130 message: "此操作会清空本地数据库中的所有数据，是否继续？"
132 }; 131 };
133 - ipcApi.send("open-messagebox", data); 132 + this.$ipcApi.send("open-messagebox", data);
134 - ipcApi.on("confirm-message", (event, arg) => { 133 + this.$ipcApi.on("confirm-message", (event, arg) => {
135 console.log(arg); 134 console.log(arg);
136 if (arg.response === 0) { 135 if (arg.response === 0) {
137 this.$db.deleall({ name: "yyy" }).then(res => { 136 this.$db.deleall({ name: "yyy" }).then(res => {
...@@ -147,7 +146,7 @@ export default { ...@@ -147,7 +146,7 @@ export default {
147 title: "错误", 146 title: "错误",
148 message: "已经没有数据可以被删除！" 147 message: "已经没有数据可以被删除！"
149 }; 148 };
150 - ipcApi.send("open-errorbox", errormsg); 149 + this.$ipcApi.send("open-errorbox", errormsg);
151 } 150 }
152 }); 151 });
153 } 152 }
...@@ -157,9 +156,9 @@ export default { ...@@ -157,9 +156,9 @@ export default {
157 switch (data) { 156 switch (data) {
158 case "one": 157 case "one":
159 const dialog = this.$electron.remote.dialog; 158 const dialog = this.$electron.remote.dialog;
160 - ipcApi.send("check-update"); 159 + this.$ipcApi.send("check-update");
161 console.log("启动检查"); 160 console.log("启动检查");
162 - ipcApi.on("UpdateMsg", (event, data) => { 161 + this.$ipcApi.on("UpdateMsg", (event, data) => {
163 console.log(data); 162 console.log(data);
164 switch (data.state) { 163 switch (data.state) {
165 case -1: 164 case -1:
...@@ -189,7 +188,7 @@ export default { ...@@ -189,7 +188,7 @@ export default {
189 this.$alert("更新下载完成！", "提示", { 188 this.$alert("更新下载完成！", "提示", {
190 confirmButtonText: "确定", 189 confirmButtonText: "确定",
191 callback: action => { 190 callback: action => {
192 - ipcApi.send("confirm-update"); 191 + this.$ipcApi.send("confirm-update");
193 } 192 }
194 }); 193 });
195 break; 194 break;
...@@ -201,34 +200,34 @@ export default { ...@@ -201,34 +200,34 @@ export default {
201 break; 200 break;
202 case "two": 201 case "two":
203 console.log(111); 202 console.log(111);
204 - ipcApi.send("start-download"); 203 + this.$ipcApi.send("start-download");
205 - ipcApi.on("confirm-download", (event, arg) => { 204 + this.$ipcApi.on("confirm-download", (event, arg) => {
206 if (arg) { 205 if (arg) {
207 this.dialogVisible = true; 206 this.dialogVisible = true;
208 } 207 }
209 }); 208 });
210 - ipcApi.on("download-progress", (event, arg) => { 209 + this.$ipcApi.on("download-progress", (event, arg) => {
211 this.percentage = Number(arg); 210 this.percentage = Number(arg);
212 }); 211 });
213 - ipcApi.on("download-error", (event, arg) => { 212 + this.$ipcApi.on("download-error", (event, arg) => {
214 if (arg) { 213 if (arg) {
215 this.progressStaus = "exception"; 214 this.progressStaus = "exception";
216 this.percentage = 40; 215 this.percentage = 40;
217 this.colors = "#d81e06"; 216 this.colors = "#d81e06";
218 } 217 }
219 }); 218 });
220 - ipcApi.on("download-paused", (event, arg) => { 219 + this.$ipcApi.on("download-paused", (event, arg) => {
221 if (arg) { 220 if (arg) {
222 this.progressStaus = "warning"; 221 this.progressStaus = "warning";
223 this.$alert("下载由于未知原因被中断！", "提示", { 222 this.$alert("下载由于未知原因被中断！", "提示", {
224 confirmButtonText: "重试", 223 confirmButtonText: "重试",
225 callback: action => { 224 callback: action => {
226 - ipcApi.send("satrt-download"); 225 + this.$ipcApi.send("satrt-download");
227 } 226 }
228 }); 227 });
229 } 228 }
230 }); 229 });
231 - ipcApi.on("download-done", (event, age) => { 230 + this.$ipcApi.on("download-done", (event, age) => {
232 this.filePath = age.filePath; 231 this.filePath = age.filePath;
233 this.progressStaus = "success"; 232 this.progressStaus = "success";
234 this.$alert("更新下载完成！", "提示", { 233 this.$alert("更新下载完成！", "提示", {
...@@ -249,12 +248,12 @@ export default { ...@@ -249,12 +248,12 @@ export default {
249 } 248 }
250 }, 249 },
251 destroyed() { 250 destroyed() {
252 - ipcApi.remove("confirm-message"); 251 + this.$ipcApi.remove("confirm-message");
253 - ipcApi.remove("download-done"); 252 + this.$ipcApi.remove("download-done");
254 - ipcApi.remove("download-paused"); 253 + this.$ipcApi.remove("download-paused");
255 - ipcApi.remove("confirm-download"); 254 + this.$ipcApi.remove("confirm-download");
256 - ipcApi.remove("download-progress"); 255 + this.$ipcApi.remove("download-progress");
257 - ipcApi.remove("download-error"); 256 + this.$ipcApi.remove("download-error");
258 } 257 }
259 }; 258 };
260 </script> 259 </script>
......
...@@ -35,49 +35,51 @@ ...@@ -35,49 +35,51 @@
35 </template> 35 </template>
36 36
37 <script> 37 <script>
38 - export default { 38 +export default {
39 - data () { 39 + data() {
40 - return { 40 + return {
41 - electron: process.versions.electron, 41 + electron: process.versions.electron || "浏览器环境",
42 - name: this.$route.name, 42 + name: this.$route.name,
43 - node: process.versions.node, 43 + node: process.versions.node || "浏览器环境",
44 - path: this.$route.path, 44 + path: this.$route.path,
45 - platform: require('os').platform(), 45 + platform: require("os").platform(),
46 - arch:require('os').arch(), 46 + arch: require("os").arch(),
47 - vue: require('vue/package.json').version 47 + vue: require("vue/package.json").version
48 - } 48 + };
49 - }, 49 + },
50 - mounted(){ 50 + mounted() {
51 - console.log(this.$route) 51 + console.log(this.$route);
52 - }
53 } 52 }
53 +};
54 </script> 54 </script>
55 55
56 <style scoped> 56 <style scoped>
57 - .title { 57 +.title {
58 - color: #888; 58 + color: #888;
59 - font-size: 18px; 59 + font-size: 18px;
60 - font-weight: initial; 60 + font-weight: initial;
61 - letter-spacing: .25px; 61 + letter-spacing: 0.25px;
62 - margin-top: 10px; 62 + margin-top: 10px;
63 - } 63 +}
64 64
65 - .items { margin-top: 8px; } 65 +.items {
66 + margin-top: 8px;
67 +}
66 68
67 - .item { 69 +.item {
68 - display: flex; 70 + display: flex;
69 - align-items: center; 71 + align-items: center;
70 - margin-bottom: 6px; 72 + margin-bottom: 6px;
71 - line-height: 24px; 73 + line-height: 24px;
72 - } 74 +}
73 75
74 - .item .name { 76 +.item .name {
75 - color: #6a6a6a; 77 + color: #6a6a6a;
76 - margin-right: 6px; 78 + margin-right: 6px;
77 - } 79 +}
78 80
79 - .item .value { 81 +.item .value {
80 - color: #35495e; 82 + color: #35495e;
81 - font-weight: bold; 83 + font-weight: bold;
82 - } 84 +}
83 </style> 85 </style>
......
1 <!-- --> 1 <!-- -->
2 <template> 2 <template>
3 - <div class="window-title" v-if="!IsUseSysTitle&&isMac"> 3 + <div class="window-title" v-if="!IsUseSysTitle&&isMac&&!IsWeb">
4 <!-- 软件logo预留位置 --> 4 <!-- 软件logo预留位置 -->
5 <div style="-webkit-app-region: drag;" class="logo"> 5 <div style="-webkit-app-region: drag;" class="logo">
6 <svg-icon icon-class="electron-logo"></svg-icon> 6 <svg-icon icon-class="electron-logo"></svg-icon>
...@@ -25,32 +25,35 @@ ...@@ -25,32 +25,35 @@
25 </template> 25 </template>
26 26
27 <script> 27 <script>
28 -import ipcApi from "@/utils/ipcRenderer";
29 export default { 28 export default {
30 data: () => ({ 29 data: () => ({
31 mix: false, 30 mix: false,
32 IsUseSysTitle: false, 31 IsUseSysTitle: false,
33 - isMac:process.platform !== 'darwin' 32 + isMac: process.platform !== "darwin",
33 + IsWeb: process.env.IS_WEB
34 }), 34 }),
35 35
36 components: {}, 36 components: {},
37 created() { 37 created() {
38 - ipcApi.send("IsUseSysTitle"); 38 + this.$ipcApi.send("IsUseSysTitle");
39 - ipcApi.on("CisUseSysTitle", (event, arg) => (this.IsUseSysTitle = arg)); 39 + this.$ipcApi.on(
40 + "CisUseSysTitle",
41 + (event, arg) => (this.IsUseSysTitle = arg)
42 + );
40 }, 43 },
41 44
42 mounted() {}, 45 mounted() {},
43 46
44 methods: { 47 methods: {
45 Mini() { 48 Mini() {
46 - ipcApi.send("windows-mini"); 49 + this.$ipcApi.send("windows-mini");
47 }, 50 },
48 MixOrReduction() { 51 MixOrReduction() {
49 - ipcApi.send("window-max"); 52 + this.$ipcApi.send("window-max");
50 - ipcApi.on("window-confirm", (event, arg) => (this.mix = arg)); 53 + this.$ipcApi.on("window-confirm", (event, arg) => (this.mix = arg));
51 }, 54 },
52 Close() { 55 Close() {
53 - ipcApi.send("window-close"); 56 + this.$ipcApi.send("window-close");
54 } 57 }
55 } 58 }
56 }; 59 };
...@@ -69,7 +72,7 @@ export default { ...@@ -69,7 +72,7 @@ export default {
69 .title { 72 .title {
70 text-align: center; 73 text-align: center;
71 } 74 }
72 - .logo{ 75 + .logo {
73 margin-left: 20px; 76 margin-left: 20px;
74 } 77 }
75 .controls-container { 78 .controls-container {
......
...@@ -3,8 +3,6 @@ import Vue from 'vue' ...@@ -3,8 +3,6 @@ import Vue from 'vue'
3 import App from './App' 3 import App from './App'
4 import router from './router' 4 import router from './router'
5 import store from './store' 5 import store from './store'
6 -// 导入数据操作库
7 -import db from './api/operationalData'
8 // 引用element 6 // 引用element
9 import ElementUI from 'element-ui' 7 import ElementUI from 'element-ui'
10 import 'element-ui/lib/theme-chalk/index.css' 8 import 'element-ui/lib/theme-chalk/index.css'
...@@ -14,14 +12,18 @@ import './error' ...@@ -14,14 +12,18 @@ import './error'
14 import './icons' 12 import './icons'
15 import '@/styles/index.scss' 13 import '@/styles/index.scss'
16 14
17 -if (!require('../../config').IsUseSysTitle) require('@/styles/custom-title.scss') 15 +if (!process.env.IS_WEB) {
18 - 16 + Vue.use(require('vue-electron'))
19 -if (!process.env.IS_WEB) Vue.use(require('vue-electron')) 17 + if (!require('../../config').IsUseSysTitle) {
18 + require('@/styles/custom-title.scss')
19 + }
20 + // 当处于electron状态下才引用db
21 + Vue.prototype.$db = require('./api/operationalData').default
22 + Vue.prototype.$ipcApi = require('./utils/ipcRenderer').default
23 +}
20 24
21 Vue.use(ElementUI) 25 Vue.use(ElementUI)
22 26
23 -Vue.prototype.$db = db
24 -
25 Vue.config.productionTip = false 27 Vue.config.productionTip = false
26 /* eslint-disable no-new */ 28 /* eslint-disable no-new */
27 const vue = new Vue({ 29 const vue = new Vue({
......