Vue学习笔记 2021/05/11

Vue学习笔记 2021/05/11

Vue项目分为开发环境和生产环境，开发环境即开发人员调试开发阶段，生产环境即项目打包部署到服务器上。

Vue项目的config文件夹下，dev.env.js和prode.env.js两个文件，里面就声明了开发环境的生产环境。

开发环境：

生产环境：

不同环境具体处理在main.js文件中进行判断：

对于在vue项目中对后台接口请求数据时，如果出现非同源请求，此时就会出现跨域请求。这个时候需要有反向代理，将非同源请求代理为同源请求，解决跨域访问。

开发环境中进行反向代理：
开发环境进行反向代理时，可以同过声明全局变量来解决跨域。比如在index.js中声明代理

在main.js中进行判断，如果此时为开发环境，将代理的请求地址以声明的代理名进行替代，如上图所示就用api替代了非同源的 http://101.37.34.176:8888/kb0024，那么在进行后台请求时，就将其变成和当前源地址的同源路径。
例如本地进行某项接口请求就变成了 http://127.0.0.1:8080/api/node/info

生产环境进行反向代理：
上面所提到开发环境进行的反向代理，在生产环境中是不起作用的，如果此时vue项目部署到了比如tomcat服务器上，服务器IP地址为127.0.0.2 启动端口为8080，如果按照上述的反向代理方式，那么进行接口请求时，请求路径为：http://127.0.0.2:8080/api/node/info，显然这个请求地址是不会有任何返回结果的。
这个时候声明的全局变量也就应该是请求的接口地址，此时也应该是将该接口地址赋值给进行请求的头地址（不需要用代理名称替代）

Main.js判断为生产环境时：

此时进行接口请求时，请求的路径直接是，接口的请求路径，进行某个具体请求时路径则为 http://101.37.334.176:8888/kb0024,此时就会请求到数据。

上面则是不同环境下的反向代理操作。但是到这里还有个问题，如果部署的服务器IP地址和进行接口请求的地址，两者是非同源地址，此时虽然请求到了数据，但是还是会出现跨域请求的问题。比如当前的vue部署的服务器ip为
127.0.0.1端口为8081,接口请求地址为101.37.334.176:8888，此时很明显两者为非同源地址。解决这个问题就需要用到nginx反向代理，来重新的代理请求。

Nginx反向代理的具体操作是，首先声明nginx监听的ip和端口，所有基于这个ip+端口发出来的请求，都是处于一个同源请求，那么此时我们只要将这个ip+端口+具体的地址作为我们真实请求地址的一个代理，然后通过nginx进行监听，当nginx监听到这个代理的地址时，然后nginx就将这个请求转发到真实的请求地址，然后将结果传回。

比如我们将上述的服务器地址和接口请求地址两个非同源的请求地址，用一组同源的请求地址进行代理。Nginx代理格式如下：

如上图所示（该文件在nginx/conf/nginx.conf）,我们将原本非同源的
服务器地址：127.0.0.1:8080/vuedemo
接口请求地址：101.37.330.176:8888/kb0024
分别用
127.0.0.1:8089/kb0024和127.0.0.1:8089/vuedemo这两个同源地址进行代理，从而解决跨域请求的问题。
具体为浏览器上请求 127.0.0.1:8089/kb0024通过nginx就会实际请求到101.37.330.176:8888/kb0024。
以上便是使用nginx通过反向代理解决跨域访问问题的方法。

补充将vue项目打包发布到tomcat注意事项：

使用 npm run build打包完成以后会出现一个dist文件夹，里面有static文件夹和一个index.html文件，通常咱们部署在tomcat上面会将文件放在webapps文件夹下。
axios若是不进行任何修改将dist文件夹放进去的话，会出现资源路径错误的问题，由于config文件夹下index文件build默认的 assetsPublicPath:"/"，除非部署的时候将dist文件里的文件放在webapps下，这样就很不科学，那咱们如何解决这个问题呢后端，修改config文件夹下index文件中的build里的assetsPublicPath:"./"。修改router文件夹下index.js添加 base: ‘/文件夹名称/’ （例如：vue，能够本身随意设置），在tomcat下webapps里面新建一个文件夹，名称是以前配置时设置的名称（vue），npm run build打包后将dist文件夹下的文件放在"vue"文件夹下。访问地址为 http://xxxxxxxxx/vue/。