vue公共URL 定义方法(六)

定义公共变量

vue3.0中，放在public文件夹下文件并不一定会不被打包。如果在main.js中直接引用，肯定会被webpack打包。如下写法在打包后，及时更改了url.js中的url地址，更改后的地址还是无效的。
1、目录结构：

2、url.js内容

export const httpUrl="http://10.88.44.142:8080";

3、main.js内容

import {httpUrl} from '../public/url';
Vue.prototype.httpUrl=httpUrl;

4、在文件中的使用

var socket = new SockJS(this.httpUrl + "/ws");

正确的方式

1、url.js

window.globalConfig = {
  	"apiUri": "http://10.88.44.142:8080"
}

2、config.js

import Vue from 'vue'
const API_BASE_URI = window.globalConfig.apiUri
Vue.prototype.$httpUrl = API_BASE_URI
var config = {
  API_BASE_URI: API_BASE_URI
}
export default config

3、main.js

import config from './config'

4、index.html

  <script src="./url.js" type="text/javascript"></script>

5、在文件中使用

var socket = new SockJS(this.$httpUrl + "/ws");

原因解释

main.js中引用的文件肯定会被webpack打包，所以直接引用url.js，会将url.js打包。
需要在config.js中引用url.js中定义的全局变量，然后将config.js打包。因为config中的变量不是固定的，所以打包进webpack还是可以通过更改url来更改config。
这样的话，可以打包后更改调用的后台地址，而不用重新打包。