From 9324fc57701e20805252d93c11f0692ec2461fc5 Mon Sep 17 00:00:00 2001 From: Link Date: Mon, 9 Nov 2020 17:40:07 +0800 Subject: [PATCH] fix: baseurl problem after electron build Fixed the problem of undeclared web fs --- .env.browser | 1 + .env.electron | 1 + package.json | 5 ++- public/index.html | 1 + script/server-local.js | 18 ++++++++ src/electron/event/ipc-main/index.ts | 6 ++- src/interface/app.ts | 2 + .../component/lyrice-flash/browser-lyrice.tsx | 41 ++++++++++++------- .../lyrice-flash/electron-lyrice.tsx | 13 +----- src/router/index.ts | 16 +++++++- src/utils/http.ts | 15 +++++++ yarn.lock | 15 ++++++- 12 files changed, 102 insertions(+), 32 deletions(-) create mode 100644 script/server-local.js diff --git a/.env.browser b/.env.browser index 6b698675..ee21fa57 100644 --- a/.env.browser +++ b/.env.browser @@ -1 +1,2 @@ VUE_APP_PLATFORM = browser +VUE_APP_BUILD_BASE_URL = / diff --git a/.env.electron b/.env.electron index f776f1cb..e083ba1c 100644 --- a/.env.electron +++ b/.env.electron @@ -1 +1,2 @@ VUE_APP_PLATFORM = electron +VUE_APP_BUILD_BASE_URL = http://localhost:3000 diff --git a/package.json b/package.json index 5cfeb38e..bccb9dd3 100644 --- a/package.json +++ b/package.json @@ -9,7 +9,7 @@ "lint:style": "stylelint --fix \"**/*.{less,css}\" --cache --cache-location node_modules/.cache/stylelint/", "build": "vue-cli-service build --mode browser", "build-storybook": "build-storybook", - "build:electron": "vue-cli-service electron:build --mode electron", + "build:electron": "cross-env BUILDER_NODE_ENV=production vue-cli-service electron:build --mode electron --win nsis", "dev": "concurrently -r \"yarn dev:api\" \"yarn generate:theme\" \"vue-cli-service serve --mode browser\"", "dev:api": "node NeteaseCloudMusicApi/app.js", "dev:electron": "concurrently -r \"yarn dev:api\" \"yarn generate:theme\" \"vue-cli-service electron:serve --mode electron\"", @@ -21,6 +21,7 @@ "storybook": "start-storybook -p 6006" }, "main": "background.js", + "sideEffects": false, "dependencies": { "chai-as-promised": "^7.1.1", "core-js": "^3.6.5", @@ -71,6 +72,8 @@ "eslint": "^6.7.2", "eslint-plugin-prettier": "^3.1.3", "eslint-plugin-vue": "^7.0.0-0", + "express": "^4.17.1", + "http-proxy-middleware": "^1.0.6", "husky": "^4.3.0", "less": "^3.0.4", "less-loader": "^5.0.0", diff --git a/public/index.html b/public/index.html index 951c6996..e4323048 100644 --- a/public/index.html +++ b/public/index.html @@ -9,6 +9,7 @@ diff --git a/script/server-local.js b/script/server-local.js new file mode 100644 index 00000000..fbbb6a36 --- /dev/null +++ b/script/server-local.js @@ -0,0 +1,18 @@ +const express = require('express') +const { createProxyMiddleware } = require('http-proxy-middleware') + +const app = express() + +const options = { + target: 'http://localhost:3001', + pathRewrite: { + '^/api': '' + } +} + +const apiProxy = createProxyMiddleware('/api', options) + +app.use('/api', apiProxy) +app.listen(3000) + +console.log('listen 3000') diff --git a/src/electron/event/ipc-main/index.ts b/src/electron/event/ipc-main/index.ts index 28109b19..cb57c3fb 100644 --- a/src/electron/event/ipc-main/index.ts +++ b/src/electron/event/ipc-main/index.ts @@ -1,3 +1,4 @@ +import { createProtocol } from 'vue-cli-plugin-electron-builder/lib' import { ipcMain, IpcMainEvent, BrowserWindow, screen } from 'electron' import { Action, LyriceAction, UpdateType } from '../action-types' @@ -45,11 +46,14 @@ export const onIpcMainEvent = (win: BrowserWindow) => { }) if (process.env.WEBPACK_DEV_SERVER_URL) { syrice.loadURL(process.env.WEBPACK_DEV_SERVER_URL + 'lyrice') + } else { + createProtocol('app') + syrice.loadFile('app://./lyrice.html') } syrice.once('ready-to-show', () => { syrice && syrice.show() }) - syrice.once('closed', () => { + syrice.on('closed', () => { syrice = null }) } diff --git a/src/interface/app.ts b/src/interface/app.ts index 3afabbb6..21c52d70 100644 --- a/src/interface/app.ts +++ b/src/interface/app.ts @@ -9,6 +9,8 @@ export interface Music extends ComponentPublicInstance { export type ENV = Window & typeof globalThis & { VUE_APP_PLATFORM: Platform + VUE_APP_IS_DEVELOPMENT: string + VUE_APP_BUILD_BASE_URL: string } export interface GlobalBase { diff --git a/src/pages/footer/component/lyrice-flash/browser-lyrice.tsx b/src/pages/footer/component/lyrice-flash/browser-lyrice.tsx index 87c15cb2..ac935809 100644 --- a/src/pages/footer/component/lyrice-flash/browser-lyrice.tsx +++ b/src/pages/footer/component/lyrice-flash/browser-lyrice.tsx @@ -1,4 +1,4 @@ -import { defineComponent, computed, toRefs, watch } from 'vue' +import { defineComponent, computed, toRefs, watch, toRaw } from 'vue' import { uesModuleStore } from '@/hooks/index' import { toFixed } from '@/utils/index' import { ENV } from '@/interface/app' @@ -10,12 +10,21 @@ import { import { NAMESPACED, State, Getter, Mutations } from '../../module' import { Platform } from '@/config/build' import LyriceFlash from './index' -import { ipcUpdateLyrice } from './electron-lyrice' -import { UpdateType } from '@/electron/event/action-types' +import { importIpc } from '@/electron/event/ipc-browser' +import { LyriceAction, UpdateType } from '@/electron/event/action-types' import './index.less' const { VUE_APP_PLATFORM } = window as ENV +export const ipcUpdateLyrice = (type: UpdateType, payload?: any) => { + importIpc().then(event => { + event.sendAsyncIpcRendererEvent(LyriceAction.LYRICE_UPDATE, { + type: type, + payload: toRaw(payload) + }) + }) +} + export const BrowserLyriceFlash = defineComponent({ name: 'BrowserLyriceFlash', setup() { @@ -75,18 +84,20 @@ export const BrowserLyriceFlash = defineComponent({ } }) - watch(flashMagic, v => { - ipcUpdateLyrice(UpdateType.UPDATE_MAGIC, v) - }) - watch(index, v => { - ipcUpdateLyrice(UpdateType.UPDATE_INDEX, v) - }) - watch(lyrice, v => { - ipcUpdateLyrice(UpdateType.UPDATE_LYRICE, v) - }) - watch(playing, v => { - ipcUpdateLyrice(UpdateType.UPDATE_PLAYING, v) - }) + if (VUE_APP_PLATFORM === Platform.ELECTRON) { + watch(flashMagic, v => { + ipcUpdateLyrice(UpdateType.UPDATE_MAGIC, v) + }) + watch(index, v => { + ipcUpdateLyrice(UpdateType.UPDATE_INDEX, v) + }) + watch(lyrice, v => { + ipcUpdateLyrice(UpdateType.UPDATE_LYRICE, v) + }) + watch(playing, v => { + ipcUpdateLyrice(UpdateType.UPDATE_PLAYING, v) + }) + } return () => ( <> diff --git a/src/pages/footer/component/lyrice-flash/electron-lyrice.tsx b/src/pages/footer/component/lyrice-flash/electron-lyrice.tsx index cdc2c4c9..35d71f21 100644 --- a/src/pages/footer/component/lyrice-flash/electron-lyrice.tsx +++ b/src/pages/footer/component/lyrice-flash/electron-lyrice.tsx @@ -1,10 +1,10 @@ -import { defineComponent, reactive, toRaw } from 'vue' +import { defineComponent, reactive } from 'vue' import LyriceFlash from './index' import { Size } from '@/layout/module' import { Lyrics } from '@/pages/footer/module' import { LyriceAction, UpdateType } from '@/electron/event/action-types' import { ErrorBoundary } from '@/components/error-boundary/index' -import { importIpc } from '@/electron/event/ipc-browser' + import { ipcRenderer } from 'electron' export interface PostData { @@ -18,15 +18,6 @@ export interface PostData { } } -export const ipcUpdateLyrice = (type: UpdateType, payload?: any) => { - importIpc().then(event => { - event.sendAsyncIpcRendererEvent(LyriceAction.LYRICE_UPDATE, { - type: type, - payload: toRaw(payload) - }) - }) -} - export default defineComponent({ name: 'Lyrice', setup() { diff --git a/src/router/index.ts b/src/router/index.ts index fbfac8d6..01600681 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -1,9 +1,18 @@ -import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router' +import { + createRouter, + createWebHistory, + createWebHashHistory, + RouteRecordRaw +} from 'vue-router' import { ComponentPublicInstance } from 'vue' import { hook } from './hook' import { TestFull } from '@/pages/test/view/index' import { FindMusic, Recommend, SongList } from '@/pages/find-new-music/index' import { Video, Mv } from '@/pages/video/index' +import { ENV } from '@/interface/app' +import { Platform } from '@/config/build' + +const { VUE_APP_PLATFORM, VUE_APP_BUILD_BASE_URL } = window as ENV export interface Meta { name?: string @@ -158,7 +167,10 @@ export const navRouter: RouteRecordRaw[] = [ ] const router = createRouter({ - history: createWebHistory(process.env.BASE_URL), + history: + VUE_APP_PLATFORM === Platform.BROWSER + ? createWebHistory(process.env.BASE_URL) + : createWebHashHistory(process.env.BASE_URL), routes: baseRouter.concat(navRouter) }) diff --git a/src/utils/http.ts b/src/utils/http.ts index b1cf28bd..6d82667b 100644 --- a/src/utils/http.ts +++ b/src/utils/http.ts @@ -1,6 +1,21 @@ import Axios, { AxiosInstance, AxiosRequestConfig } from 'axios' +import { ENV } from '@/interface/app' +import { Platform } from '@/config/build' +// https://nklayman.github.io/vue-cli-plugin-electron-builder/guide/guide.html#serve-command +// The electron build process is in development mode +const isDevelopment = process.env.BUILDER_NODE_ENV === 'development' +const { VUE_APP_PLATFORM, VUE_APP_BUILD_BASE_URL } = window as ENV + +const baseURL = + VUE_APP_PLATFORM === Platform.ELECTRON + ? isDevelopment + ? '' + : VUE_APP_BUILD_BASE_URL + : '' +console.log(baseURL) const http: AxiosInstance = Axios.create({ + baseURL: baseURL, timeout: 5000 }) diff --git a/yarn.lock b/yarn.lock index 9142741a..4f46bd99 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2638,7 +2638,7 @@ "@types/http-proxy" "*" "@types/node" "*" -"@types/http-proxy@*": +"@types/http-proxy@*", "@types/http-proxy@^1.17.4": version "1.17.4" resolved "https://registry.npm.taobao.org/@types/http-proxy/download/@types/http-proxy-1.17.4.tgz#e7c92e3dbe3e13aa799440ff42e6d3a17a9d045b" integrity sha1-58kuPb4+E6p5lED/QubToXqdBFs= @@ -9321,7 +9321,18 @@ http-proxy-middleware@0.19.1: lodash "^4.17.11" micromatch "^3.1.10" -http-proxy@^1.17.0: +http-proxy-middleware@^1.0.6: + version "1.0.6" + resolved "https://registry.npm.taobao.org/http-proxy-middleware/download/http-proxy-middleware-1.0.6.tgz#0618557722f450375d3796d701a8ac5407b3b94e" + integrity sha1-BhhVdyL0UDddN5bXAaisVAezuU4= + dependencies: + "@types/http-proxy" "^1.17.4" + http-proxy "^1.18.1" + is-glob "^4.0.1" + lodash "^4.17.20" + micromatch "^4.0.2" + +http-proxy@^1.17.0, http-proxy@^1.18.1: version "1.18.1" resolved "https://registry.npm.taobao.org/http-proxy/download/http-proxy-1.18.1.tgz#401541f0534884bbf95260334e72f88ee3976549" integrity sha1-QBVB8FNIhLv5UmAzTnL4juOXZUk=