手把手vue-cli3.0搭建项目(二) 开发环境配置

朱雀 2021-11-27 07:14 231阅读 0赞

vue-cli3.0和vue-cli2配置是不一样的，2中很多配置文件都是有的，直接在上面加配置就行，但是3.0配置文件是要自己加的  
详情可以创建一个2的版本去对比不同之处，这里不详细说了

## 1.主配置 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1YW5xaTMxMzE_size_16_color_FFFFFF_t_70]  
当然可以在devServer配置其他，跨域代理也可以配置

devServer: {
        port: 8080,
        // proxy: {
        //   '/api': { 
        //     target: 'http://xxx.xx:xx:xx:4000/', //对应自己的接口
        //     changeOrigin: true,
        //     ws: true
        //   }
        // }
      },

## 2.开发环境配置&&生产环境配置 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1YW5xaTMxMzE_size_16_color_FFFFFF_t_70 1]  
下面的为开发配置 下面的`VUE_APP_API_URL`是用来写接口的BASE\_URL的 后面会说到，这两个配置文件都是会自动读取的，但是你要使用下面的额`VUE_APP_API_URL`要用`process.env`而且必须命名要 **VUE\_APP\_** 开头（重点），不以这个前缀的话是读取不到的 你可以试试`console.log(process.env)` 因为前面在主配置里面设置了跨域 看上面的图 所以这里写api 后面axios会用到这个`VUE_APP_API_URL` 就会统一拦截跨域，后面写axiaos的时候会继续讲的，下面第二张图是生产环境配置 吧你的生产环境地址填上去即可 这两个文件跟主配置文件一样都是会自动识别的 ，在这两个文件中都可以配置你想要的环境配置  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1YW5xaTMxMzE_size_16_color_FFFFFF_t_70 2]  
![在这里插入图片描述][20190724150900546.png]  
下面这张图为官方说明 [传送门][Link 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1YW5xaTMxMzE_size_16_color_FFFFFF_t_70 3]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1YW5xaTMxMzE_size_16_color_FFFFFF_t_70]: /images/20211126/9c8bdb97c50747d2975fa23d889bd701.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1YW5xaTMxMzE_size_16_color_FFFFFF_t_70 1]: /images/20211126/48b87a9c62d04bd1ab49898e4acad5a8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1YW5xaTMxMzE_size_16_color_FFFFFF_t_70 2]: /images/20211126/1b15f144f63e4731bd8f11a5dd84dea1.png
[20190724150900546.png]: /images/20211126/71cc61b904bb4c6f9bffe425febb5f88.png
[Link 1]: https://cli.vuejs.org/zh/guide/mode-and-env.html#%E5%9C%A8%E5%AE%A2%E6%88%B7%E7%AB%AF%E4%BE%A7%E4%BB%A3%E7%A0%81%E4%B8%AD%E4%BD%BF%E7%94%A8%E7%8E%AF%E5%A2%83%E5%8F%98%E9%87%8F
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1YW5xaTMxMzE_size_16_color_FFFFFF_t_70 3]: /images/20211126/4c5544ecd81c48d8b7ce37b2f3f83f5b.png