用了一段时间VUE后的学习笔记

Posted 2021-12-11 左直拳

1）process.env.NODE_ENV
2）devServer.proxy
3）axios

这3个东西我都还没搞懂。

一、process.env.NODE_ENV

process.env.NODE_ENV 这个东西用于区分当前环境是开发环境，还是生产环境。如果是开发环境，即怎样怎样；开发环境，就如何如何。

如何设置这个NODE_ENV？据说process.env里没有这个东东，你不设置，就不会天然有这个东东。那怎么设置呢？vue3跟vue2是不一样的。vue2，可以写在webpack.config.js和packing.json里；而vue3不用写，系统默认是源代码运行时是开发环境；发布时是for 生产环境。

development：在vue-cli-service serve下，即开发环境使用
production：在vue-cli-service build和vue-cli-service test:e2e下，即正式环境使用
test： 在vue-cli-service test:unit下使用

好聪明啊！

但其实，搞出process.env.NODE_ENV这么个东西，我觉得是前端工程还不完善的缘故。因为现在的前端，都要先发布再部署，发布的时候，将所有的文件都压缩处理过，仿佛编译过了。所以生产环境的配置，要预先定义好在代码里，部署上去之后就改不了了。这就很搞笑，不能改还叫配置吗。我估计以后的前端，应该不是所有东西都编译的。

二、devServer.proxy

用于解决跨域请求。即，vue项目需要向位于不同服务器的后端请求数据，为了避免跨域问题，就用这个东东。这个东东的作用，估计是类似nginx的映射，将其他IP的地址映射为本机地址，请求数据就仿佛向本机请求一样，如此浏览器即施施然，上当而失去警惕矣。

根目录下的vue.config.js中，devServer.proxy属性。devServer，虽然有个dev，但似乎跟开发环境，生产环境没啥关系，名称是约定俗成的。

/vue.config.js

  module.exports = {
     // 基本路径  
     publicPath: './',
     // 输出路径   
     outputDir: 'dist',
     // 静态资源    
     assetsDir: './',
     // eslint-loader是否在保存时候检查  
     lintOnSave: true,
     // 服务项配置    
     devServer: {
         host: 'localhost',
         port: 8080,
         https: false,
         open: true,
　　 // 设置代理proxy
         proxy: {
            '/api':{//'/api'是一个ID
                'target':'http://192.168.0.248:3000',
                changeOrigin:true,    //表示是否跨域，
                pathRewrite:{           //表示需要rewrite重写的
                    '^/api':'',
                }
            }
         }   
     }
 }

proxy理解如下：

1）‘/api’是一个ID。意思是，这里有一个需要用代理的设置。凡以‘/api’开头的请求，都适用本代理。比如有个请求代码为

this.$axios.post('/api/camera/query',data).then(res=>{
        console.log(res)
})

有了以上设置，系统将触发使用代理。

请注意，这是一个代理。代理的意思，就是帮你把活干了。它是怎么干的，对外部来说，是个黑箱。从本例来说，我们请求'/api/camera/query'，根目录开头，浏览器调试的时候，看到请求的地址是 http://本机域名或IP:端口/api/camera/query，但实际上，它请求的是 http://192.168.0.248:3000/api/camera/query。

使用代理，不一定只有api。项目如果比较大，或者追求复用，可能会分布式部署。静态资源，比如公用js库，图片等，都可能使用代理。

2）pathRewrite
由于有了代理设置，1）中的请求，将变成 http://192.168.0.248:3000/api/camera/query。但实际情况可能是，真正的接口地址是 http://192.168.0.248:3000/camera/query。因此，又用到了改写pathRewrite，将步骤1中的地址的’/api’替换掉，换成长度为0的空字符。所以这个pathRewrite是在步骤1的转换基础上，进一步处理。要不要来个改写，这要看代码的实际情况，这里只是举例说明原理。‘^/api’是一个正则表达式，其中的^意思是开头。只将开头的匹配字符串替换。

这个pathRewrite不是必须的。

三、axios

这是一个插件。专门用于处理Promise之类的异步请求的。这么说吧，用于前端向后端请求、提交数据。其地位，就相当于jquery里的$.ajax()。

参考文章
process.env.NODE_ENV详解
vue3.0配置代理proxy 主要解决的是接口问题和路径问题
What is Axios?
How to use pathrewrite in cross domain in Vue cli proxytable