electron-vue配置接口代理、引入自定义vh和vw适配scss以及解决element-ui的el-table组件数据渲染失败问题

electron-vue配置接口代理、引入自定义vh和vw适配scss以及解决element-ui的el-table组件数据渲染失败问题

在使用electron-vue进行桌面应用开发时，如何进行接口代理配置和引入做适配的自定义的scss，以及如何解决el-table组件数据渲染失败的问题，这里简单记录一下。
1、进行接口代理配置，在dev-runner.js文件下找到const server = new WebpackDevServer，在options里添加接口代理proxy：

const server = new WebpackDevServer(
      compiler,
      {
        contentBase: path.join(__dirname, '../'),
        quiet: true,
        //添加proxy代理配置 即配置整个项目的请求代理
        proxy: {
          '/项目名称': {
            target: 'http://xxxx',//你的服务器ip 如：http://10.1.60.233:16669/项目名称
            /*target: 'http://xxxx', // 本地测试 */
            /*target: 'http://xxxxx', // 本地测试 */
            changeOrigin: true,
            pathRewrite: {
              '^/项目名称': '/'
            }
          }
        },
        before (app, ctx) {
          app.use(hotMiddleware)
          ctx.middleware.waitUntilValid(() => {
            resolve()
          })
        }
      }
    )

2、引入自定义vh和vw适配的.scss,首先下载安装sass-resources-loader

npm install sass-resources-loader

sass-resources-loader安装结束之后在webpack.renderer.config.js下，找到rendererConfig下的module模块，在rules里面引入自定义的.scss即可，配置代码如下：

rules: [
      {
        //引入自定义vh和vw适配scss方案
        test: /\.scss$/,
        //use: ['vue-style-loader', 'css-loader', 'sass-loader']
        use:[
            "vue-style-loader",
            "css-loader",
            "sass-loader",
          {
            loader: "sass-resources-loader",
            options: {
            //这里引入自定义的文件即可
              resources:path.resolve(__dirname,'../src/renderer/assets/css/global.scss')
            }
          }
        ]
      },
      //其他代码
    ]

3、解决element-ui的el-table组件在electron-vue里数据渲染失败问题：首先肯定是得下载element-ui以及在main.js里面引入了，下载参考之前的博客：Vue中引入elementUI组件方法，接下来在webpack.renderer.config.js下，找到：

let whiteListedModules = ['vue']

添加element-ui组件，即修改为：

let whiteListedModules = ['vue','element-ui']

这样配置结束后，问题得到解决。
4、下面展示下适配之后的electron桌面应用效果图，接下来进行正常的开发工作即可

兄弟萌赶快试试吧 冲冲冲~