Electron-vue踩坑指南

一、怎样在项目中使用vue-devtools

下载vue-devtools的解压包

1. 网盘地址 提取码：4rri
2. 把 devTools 文件夹放在项目的根目录

打开 /src/main/index.dev.js 文件修改

require('electron').app.on('ready', () => {
  // let installExtension = require('electron-devtools-installer')
  // console.log(installExtension);
  // installExtension.default(installExtension.VUEJS_DEVTOOLS)
  //   .then(() => {})
  //   .catch(err => {
  //     console.log('Unable to install `vue-devtools`: \n', err)
  //   })
  // 安装vue-devtools
  BrowserWindow.addDevToolsExtension(path.resolve(__dirname, '../../devTools/vue-devtools'));
})

参考： www.cnblogs.com/wozho/p/107…

二、css预处理器不生效

检查package.json：

vue-loader 版本是15v

出现问题原因

以Stylus为例 下载

npm i stylus stylus-loader -D

打开 /.electron-vue/webpack.renderer.config.js 文件修改

  module: {
  //其他的不变
    rules: [
      {//新增这条规则
        test: /\.stylus$/,
        use: ['vue-style-loader', 'css-loader','stylus-loader']
      },
      {//把use修改为这样
        test: /\.vue$/,
        use: 'vue-loader'
      },
    ]
  },

...后续更多