vue.js - 使用vue cli 构建的项目，现在需要使用微信js sdk，如何使用？

问题描述

问 题

在vue组件中
const wx = require('../assets/js/wx')
后直接报出错误，

error in ./src/assets/js/wx.js

  error        space-unary-ops        Unexpected space after unary operator '!'                                                                      
  /Users/Niok/Documents/Work/so/ga-piclike/src/assets/js/wx.js:1:1
  ! function(a, b) { "function" == typeof define && (define.amd || define.cmd) ? define(function() {
   ^

应该是es6的问题，但是现在没有解决思路，所以前来提问

第一次使用vue写正式项目但是在这里卡住了。
还有开发模式时候的请求数据也有问题希望能得到解答。
谢谢

更新直接引入后的结果，在模块中无法找到这个wx

//更新
引入https://www.npmjs.com/package/weixin-js-sdk。
可以在app.js看到jweixin的引入。
import wx from 'weixin-js-sdk'
但是当我在组件下打印
console.log(wx)
控制台报 undefined;

//更新 已经解决
使用
https://www.npmjs.com/package/weixin-js-sdk

//更新些最终解决方案
一：安装 weixin-js-sdk 这个模块 npm install weixin-js-sdk --save-dev
二：开始使用 import wx from 'weixin-js-sdk'

然后就可以使用了。wx.config 然后使用接口了。不过现在我还有问题

解决方案

好像可以这么用：

require(['../libs/jweixin-1.0.0.js'], function (wx) {
  console.log(wx)
})

参考：https://webpack.github.io/docs/code-splitting.html

上面还是不对！！！

如果不想改动jweixin-1.0.0.js，需要使用webpack的imports-loader（https://github.com/webpack/imports-loader），但要注意一个问题：https://github.com/webpack/imports-loader/issues/23

when using both 'babel-loader' and 'imports-loader', this=>window will not work #23

最终写成这样：

var wx = require('imports?this=>window!../libs/jweixin-1.0.0.js')
console.log(wx)

这篇关于vue.js - 使用vue cli 构建的项目，现在需要使用微信js sdk，如何使用？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！