配置信息
1. vue.config.js
由于我这边项目是使用vue-cli构建的，所以附上vue.config.js的配置信息，主要是linux部分
const { defineConfig } = require("@vue/cli-service");
const AutoImport = require("unplugin-auto-import/webpack");
const Components = require("unplugin-vue-components/webpack");
const { ElementPlusResolver } = require("unplugin-vue-components/resolvers");
const Icons = require("unplugin-icons/webpack");
const IconsResolver = require("unplugin-icons/resolver");
const path = require("path");
const pathSrc = path.resolve(__dirname, "src");
module.exports = defineConfig({
transpileDependencies: true, // 以避免构建后的代码中出现未转译的第三方依赖；Default `false` babel-loader 会忽略所有node_modules中的文件
lintOnSave: false, // 取消在开发环境下通过eslint-loader 在每次保存时 lint 代码。
parallel: false, // 不在生产构建的时候，使用多线程来构建项目，Default 默认启用 thread-loader
pluginOptions: {
electronBuilder: {
preload: "src/preload.ts",
customFileProtocol: "./", //打包后iconfont路径指向
builderOptions: {
// options placed here will be merged with default configuration and passed to electron-builder
productName: "ip-broadcast", //项目名，也是生成的安装文件名，即ip-broadcast.exe
appId: "com.example.ip-broadcast",
copyright: "itc © 2023", //版权信息
// 设置用户可选择安装目录
nsis: {
// "oneClick" : false,// 是否一键安装
// "allowToChangeInstallationDirectory" : true, // 允许修改安装目录
installerIcon: "public/ip.ico", // 安装图标
uninstallerIcon: "public/ip.ico", //卸载图标
installerHeaderIcon: "public/ip.ico", // 安装时头部图标
createDesktopShortcut: true, // 创建桌面图标
createStartMenuShortcut: true, // 创建开始菜单图标
shortcutName: "ip-broadcast", // 图标名称
deleteAppDataOnUninstall: true, // 卸载时删除 localStorage 数据
// "include": "./installer.nsh", // 配置 nsn 如修改默认安装目录
// "license": "./public/license_zh_CN.txt", // 用户协议-指定语言路径
// "displayLanguageSelector": true, // 语言选择配置
},
// "directories": {//输出文件夹
// "buildResources": "./public", // 用户协议-支持多语言
// },
win: {
//win相关配置
// "requestedExecutionLevel": "highestAvailable", // requireAdministrator: 管理员权限, highestAvailable: 可用的最高权限, asInvoker: 默认配置
icon: "public/ip.ico", //图标，当前图标在icon目录下，注意这里有两个坑
target: [
{
target: "nsis", // 使用nsis打成安装包，打包成免安装版
arch: [
"x64", //64位
// "ia32"//32位
],
},
],
},
dmg: {
// macOSdmg macOS系统上常用的安装包格式
contents: [
{
x: 410,
y: 150,
type: "link",
path: "/Applications",
},
{
x: 130,
y: 150,
type: "file",
},
],
},
mac: {
// mac
icon: "./icon/icon.icns",
},
linux: {
// linux
icon: "./src/assets/images/logo-linux.png",
target: [
{
target: "deb", // 使用deb打成安装包
},
],
category:"Development",
},
},
},
},
/**
* webpack 配置进行更细粒度的修改 https://cli.vuejs.org/zh/config/#chainwebpack
*/
chainWebpack(config) {
// 移除 prefetch 插件
// prefetch 插件 通常用于在路由导航时 自动预加载页面资源，以提升用户体验，不过可能导致首屏展示到用户可操作性的时间增加
config.plugins.delete("prefetch");
// set environment variables 消除 vue-i18n 的 esm-bundler 构建警告
// 详情查看 https://github.com/intlify/vue-i18n-next/issues/789
config.plugin("define").tap((definitions) => {
Object.assign(definitions[0], {
// ... rest of your injected vars here
// get rid of vue-i18 warning
__VUE_I18N_FULL_INSTALL__: JSON.stringify(true),
__INTLIFY_PROD_DEVTOOLS__: JSON.stringify(false),
__VUE_I18N_LEGACY_API__: JSON.stringify(false),
});
return definitions;
});
},
configureWebpack: {
// 路径别名配置
resolve: {
alias: {
"@": pathSrc,
assets: "@/assets",
components: "@/components",
views: "@/views",
},
},
/**
* 向全局自动导入插件配置，配置详情：
* unplugin-auto-import: https://github.com/antfu/unplugin-auto-import
* unplugin-vue-components: https://github.com/antfu/unplugin-vue-components
*/
plugins: [
AutoImport({
// 目标文件
include: [
/.[tj]sx?$/, // .ts, .tsx, .js, .jsx
/.vue$/, // .vue
/.vue?vue/,
/.md$/, // .md
],
// 全局注册导入，详情看 auto-imports.d.ts 文件
imports: [
"vue",
"pinia",
"vue-router",
{
"@/utils/storage": [
// 命名导入 import { localStorage } from '@/utils/storage'
"localStorage",
],
"@/store/get_store": [["default", "getStore"]],
"@/utils/global/index": [["default", "usePublicMethod"]],
"@/utils/global/format_map_type": [["default", "useFormatMap"]],
"@/utils/global/config": [["default", "useConfig"]],
"@/utils/global/regex": [["default", "useRegex"]],
"@/utils/vue/use_current_instance": [
["default", "useCurrentInstance"],
],
axios: [
// 默认导入 import { default as axios } from 'axios'
["default", "axios"],
],
},
],
// 声明文件生成位置和文件名称
dts: path.resolve(pathSrc, "auto-imports.d.ts"),
// 解析器来进行组件声明
resolvers: [
// Element Plus 组件相关函数(带样式)
ElementPlusResolver(),
// 图标组件
IconsResolver({
prefix: "Icon",
}),
],
// eslint报错解决
eslintrc: {
enabled: true, // Default `false`
filepath: "./.eslintrc-auto-import.json",
globalsPropValue: true,
},
}),
Components({
// 自定义组件的解析器
resolvers: [
// Element Plus 组件
ElementPlusResolver(),
// 图标库组件
IconsResolver({
enabledCollections: ["ep"],
}),
],
// 声明文件生成位置和文件名称
dts: path.resolve(pathSrc, "components.d.ts"),
}),
Icons({
autoInstall: true,
}),
],
},
/**
* 向全局sass样式传入共享的全局变量, $src可以配置图片cdn前缀
* 配置详情: https://cli.vuejs.org/zh/guide/css.html#%E5%90%91%E9%A2%84%E5%A4%84%E7%90%86%E5%99%A8-loader-%E4%BC%A0%E9%80%92%E9%80%89%E9%A1%B9
*/
css: {
loaderOptions: {
scss: {
// 注意：在 sass-loader v8 中，这个选项名是 "prependData"
// 但是在配置 `prependData` 选项的时候
// `scss` 语法会要求语句结尾必须有分号，`sass` 则要求必须没有分号
additionalData: `
@import "@/assets/css/color.scss";
`,
},
},
},
/**
* 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。
* 打包之后发现map文件过大，项目文件体积很大，设置为false就可以不输出map文件
* map文件的作用在于：项目打包后，代码都是经过压缩加密的，如果运行时报错，输出的错误信息无法准确得知是哪里的代码报错。
* 有了map就可以像未加密的代码一样，准确的输出是哪一行哪一列有错。
*/
productionSourceMap: false,
/**
* 详情看官网：https://cli.vuejs.org/zh/config/
* 支持webPack-dev-server的所有选项
* host: 可以直接写IP地址这样方便真机测试
* port: 端口号
* open: 配置自动启动浏览器
* proxy: 配置多个代理
*/
devServer: {
host: "127.0.0.1",
port: 8010,
open: false,
// open: true,
// https: true,
proxy: {
"/api/v29+": {
target: "http://172.16.39.123:81",
changeOrigin: true,
},
"/api/v1/": {
target: "http://127.0.0.1:9999",
changeOrigin: true,
},
},
},
});
2. package.json
{
"name": "ip-broadcast",
"version": "3.0.6",
"private": true,
"description": "ip广播3.0", // linux
"homepage": "https://www.itc.vip/", // linux
"asar": false, // linux
"author": { // linux
"name": "itc",
"email": "xxx"
},
"license": "CC0-1.0", // linux
"repository": "/IPBroadCastV3.0/IPBroadCastWeb-Electron", // linux
"keywords": [ // linux loong
"Electron",
"quick",
"start",
"tutorial",
"demo"
],
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"electron:build": "vue-cli-service electron:build",
"electron:serve": "vue-cli-service electron:serve",
"postinstall": "electron-builder install-app-deps",
"postuninstall": "electron-builder install-app-deps"
},
"dependencies": {
"@element-plus/icons-vue": "^2.0.4",
"axios": "^1.3.4",
"core-js": "^3.8.3",
"element-plus": "^2.3.1",
"pinia": "^2.0.14",
"pinia-plugin-persist": "^1.0.0",
"ts-md5": "^1.2.11",
"vue": "^3.2.47",
"vue-i18n": "^9.2.2",
"vue-router": "^4.0.3",
"vue-upload-component": "^3.1.2"
},
"devDependencies": {
"@types/electron-devtools-installer": "^2.2.0",
"@typescript-eslint/eslint-plugin": "^5.4.0",
"@typescript-eslint/parser": "^5.4.0",
"@vue/cli-plugin-babel": "~5.0.0",
"@vue/cli-plugin-eslint": "~5.0.0",
"@vue/cli-plugin-router": "~5.0.0",
"@vue/cli-plugin-typescript": "~5.0.0",
"@vue/cli-service": "~5.0.0",
"@vue/eslint-config-typescript": "^9.1.0",
"electron": "^17.0.0",
"electron-devtools-installer": "^3.1.0",
"eslint": "^7.32.0",
"eslint-plugin-vue": "^8.0.3",
"sass": "^1.32.7",
"sass-loader": "^12.0.0",
"typescript": "~4.7.4",
"unplugin-auto-import": "^0.8.7",
"unplugin-icons": "^0.14.3",
"unplugin-vue-components": "^0.19.6",
"vue-cli-plugin-electron-builder": "^3.0.0-alpha.4"
},
"volta": {
"node": "16.16.0",
"yarn": "1.22.1"
}
}
龙芯系统下构建项目步骤
1. // 安装nvm
wget -c http://ftp.loongnix.cn/nodejs/npm-registry/LoongArch/abi-v1.0/nvm/nvm-0.39.1.tar.gz
export NVM_DIR="$HOME/.nvm"
tar -xf nvm-0.39.1.tar.gz
mv nvm-0.39.1 $NVM_DIR
export NVM_DIR="$HOME/.nvm"
bash $NVM_DIR/nvm.sh
[ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh"
2. // 安装node
nvm ls-remote node
nvm install 16.17.1（安装与项目最近的版本）
3. // 拉代码
git clone https://github.com/electron/electron-quick-start.git（拉代码）
4. // 设置龙芯npm源
npm config set registry https://registry.loongnix.cn:4873/
5. // 安装electron
ELECTRON_MIRROR=http://ftp.loongnix.cn/electron/LoongArch/ electron_use_remote_checksums=1 npm install electron@20.0.3
// 最好用高一点版本的，我使用17.4.0 就遇到了很多不兼容的坑
6. // 安装electron-builder
npm i electron-builder@23.0.3 --verbose
// 这个版本有做vue-cli-electron-builder 的适配，同时也有python版本的适配，有些会因为python2与python3版本的问题而报一些错
// 这个版本是官方测试通过的，可以少遇坑
7. // 安装龙芯特等依赖
sudo apt-get install ruby ruby-dev rubygems build-essential
sudo gem install --no-document fpm（安装完electron-builder之后再安装，不同版本的electron-builder的fpm会有差别）
export USE_SYSTEM_FPM="true"
8. 打包构建
npm run build
问题解析
- 这里不知什么原因：electron-builder的version一直显示22.14.13，可能之前设置的缓存问题，但是实际如果不是重新安装了23.0.3版本的话，是会报错的
- electron-builder@23.0.3 + electron@17.4.0
- 在上述 2 的基础上重装electron-builder@23.0.3
ps：这就是需要重新重复
- 这是安装了多个electron版本后导致的，最好是重新开一个文件夹重头开始
- 这种情况就是需要用electron-builder@23.0.3版本
