先记录用法(推荐用yarn,后期编译打包官方推荐的是yarn,可以省下不必要的错误)
# 安装 vue-cli 和 脚手架样板代码
yarn global add @vue/cli
yarn global add @vue/cli-init
vue init simulatedgreg/electron-vue my-project
# 安装依赖并运行你的程序
cd my-project
yarn
yarn run dev
此时,项目已经跑起来了,下面开始记录问题。
yarn run build报错
Error: Exit code: 2. Command failed: /usr/bin/perl /private/var/folders/qf/4tpz_1w10ql8_lr3n0d_2fs80000gn/T/t-FicMln/1-dmgProperties.pl
Can't locate Mac/Memory.pm in @INC
刚开始查了好多资料,都没解决,最后找到一篇帖子https://github.com/electron-userland/electron-builder/issues/3990,发现是electron-builder版本的问题。
yarn add electron-builder@latest -S
打包特别慢
// 一直卡在下载这里
downloaded url=https://github.com/electron/electron/releases/download/v2.0.18/electron-v2.0.18-darwin-x64.zip
解决方法
ELECTRON_MIRROR=https://npm.taobao.org/mirrors/electron/ yarn run build
注意,命令中间的空格不能省
新建全局scss文件不生效
vue文件里的style用lang="scss"没问题,app.scss不生效,scss语法不可用。使用sass-resource-loader
在.electron-vue/webpack.renderer.config.js里加入以下代码。
{
test: /\.scss$/,
use: [
"vue-style-loader",
"css-loader",
"sass-loader",
{
loader: "sass-resources-loader",
options: {
resources: path.resolve(__dirname, '../src/renderer/styles/index.scss')
}
}
]
}
}
需要先安装sass-resource-loader
yarn add sass-resource-loader
在app.vue中引用scss文件,会导致语法错误,编译报错
Module build failed (from ./node_modules/css-loader/index.js):
Unknown word (21:1)
解决办法为,在main.js中引用
import './style/app.scss';
后续继续踩坑,再更新。。。