electron-vue踩坑记录

先记录用法(推荐用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';

后续继续踩坑，再更新。。。