VueCli配置

我使用的版本式vue cli 3.x

1.配置外部的js(微信js-sdk引入)

在vuecli中，引入微信的js-sdk，有两种方式,一种是使用weixin-js-sdk，一种是使用外部js文件的方式。
(1) npm安装weixin-js-sdk的方式
这种方式的引入，就比较简单了，只需要执行安装和引入就可以了。

1
2
3
4
5
6

## 安装
npm install weixin-js-sdk --save-dev

## main.js中引入
import wx from 'weixin-js-sdk'

(2) 外部js文件的方式
第一种使用外部js文件的方式引入js-sdk:

下载js代码，或者使用cdn。在index.html中，添加script，然后在引入的地方忽略eslint检查

1
2
3
4
5

<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

// 在main.js中输出
/* eslint-disable */
console.log(wx);

其中的eslint-disable一定要加，否则就会报错

第二种使用外部js文件的方式引入js-sdk,主要分为以下几个部分，index.html中，vue.config.js中和需要使用wx的地方比如main.js中。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

// index.html中引入
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

// vue.config.js中配置externals
module.exports = {
    configureWebpack: {
        externals:{//忽略打包
            'wx':'jWeixin'
        }
        // plugins: [
        //    new webpack.ProvidePlugin({
        //       wx: 'jWeixin'
        //    })
        // ]
    }
}

// main.js中使用
import wx from 'wx'
console.log(wx);

问题

在vue cli 3.x配置好了微信的js-sdk之后，打开网站，出现了：Cannot read property ‘title’ of undefined

根据参考文章3:

jweixin-1.2.0.js里面的执行方式不适合直接webpack。这个问题的原因是，里面在执行this.document.title的时候出的问题，这个js期望实在浏览器全局作用域下执行（this指向window），但是webpack之后，是在一个function作用域下执行，因此this.document为undefined。

因此有几种方式修改：
(1) 改源码，将jweixin-1.2.0.js中第一个this改为window
(2) 在html中使用script引入
(3) webpack有个script-loader可以让模块文件在global环境下执行

3.配置环境变量

有什么我们需要在开发环境中引入本地的http请求路径，比如localhost,在打包到线上的时候，就要换成线上的域名地址，每次打包的时候都要手动去更改，那就缺少自动化的味道了。在vue cli 2.x中，可以通过配置不同的webpack.dev.config.js文件，来区分不同的配置变量。在vue cli 3.x 增加了 .env 环境变量文件。比如：.env.development只在开发环境中引入；.env.production模式用于 vue-cli-service build 和 vue-cli-service test:e2e。

(1) 在根路径下创建.env.development和.env.production这两个文件

(2)文件中分别编写不同的环境配置

1
2
3
4
5
6

## .env.development文件内容
baseDomain="http://localhost:801"


## .env.production文件内容
baseDomain="http://bibbichuan.net"

(3) 引入环境变量

1
2
3
4
5

let baseDomain=process.env.baseDomain;

axios({
    baseUrl:baseDomain
})

(4) 只有以 VUE_APP_ 开头的变量会被 webpack.DefinePlugin 静态嵌入到客户端侧的包中。你可以在应用的代码中访问它们

4.Proxy配置代理

我在代码中写 chart/data/asset/data/aqi-beijing.json,，本意就是请求：https://echarts.apache.org/examples/data/asset/data/aqi-beijing.json,可以使用 pathRewrite进行替换。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

module.exports = {
  publicPath: "./",
  devServer:{
    host: "0.0.0.0",
    port:8099,
    // 设置代理proxy
    proxy: {
      "/xxxx": {
        target: "https://xxxx/ls",
        changeOrigin: true
      },
      "/chart":{
        target: "https://echarts.apache.org/examples",
        //显示代理后的地址
        logLevel:'debug',   
        // 允许跨域
        changeOrigin: true,
         // 路径重写
        pathRewrite: {
          "^/chart": ""
        }
      }
    }   
  }
}

这里还有一个地方注意，就是proxy的配置的匹配规则，是优先匹配，如果前面的已经匹配到了，就不回走后面的代理了。例如同时定义了 “/” 和 “/chart”, 那么全部的代理就都会走 “/”，而不会找到 “/chart”,即便是请求的 “/chart/data” 这样的目录。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

proxy: {
"/": {
    target: "https://xxx/ls",
    changeOrigin: true
},
"/chart":{
    target: "https://echarts.apache.org/examples",
    logger: "info",
    // 允许跨域
    changeOrigin: true,
        // 路径重写
    pathRewrite: {
        "^/chart": ""
    }
}
}