由于一些演示，需要对编码名称等可快速进行修改，需要页面方便配置。由于build后的vue项目基本已经看不出原样，因此需要创建一个文件，并在打包的时候不会进行编译。
vue-cli 2.0的作法是在static文件下创建js。vue-cli 3.0 的写法则是直接在public文件夹下创建js、
具体操作如下：
1、在public文件夹下创建env.js文件，里面文件的语法是es5，不允许使用浏览器不能兼容的es6语法。因为该文件不进行编译，es6部分语法浏览器不兼容。
2.、在html文件下，使用<scrtipt>标签进入
3、在页面直接按照原生的方法使用即可。
例如env.js定义了一个变量叫env，并在index.html页面引入后，那么在页面任何一处地方都可以直接使用。
env.js
/自定义全局变量，此文件不编译，因此需要用原生的写法/
let host = "192.168.1.100"
let env = {
host: host,
apiUrl:"http://" + host + "/api/",
msgUrl: "http://10.33.10.33:9000",
wsUrl: "ws://" + host + ":8094"
}
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= webpackConfig.name %></title>
</head>
<script src="<%= BASE_URL %>env.js" type="text/javascript"></script>
<body>
<div id="app"></div>
</body>
</html>
页面使用：
// 初始 webSocket
initWebSocket() {
if (typeof (WebSocket) == 'undefined') {
this.$notify({
title: '提示',
message: '当前浏览器无法接收实时报警信息，请使用谷歌浏览器！',
type: 'warning',
duration: 0
});
} else {
let socketUrl = env.wsUrl + "/ws/chat/"
this.websock = new WebSocket(socketUrl);
this.websock.onmessage = this.websocketonmessage;
this.websock.onopen = this.websocketonopen;
this.websock.onerror = this.websocketonerror;
this.websock.onclose = this.websocketclose;
}
},
网友评论