vue

项目中遇到vue相关error及解决方案-持续更新中

记录实习中遇到的一些vue的问题及解决方案。

跨域问题

公司使用Nginx反向代理接口域名，所以在conf/nginx.conf文件中需要对不同的域名设置不同的跨域规则。
形如：

1
2
3
4
5
6
7
8
9
10
11
server {...}

server {
    listen 80;
    server_name www.example.com;
    return 301 https://$server_name$request_uri;
    location / {
        proxy_pass https://www.example.com:your_port; proxy_redirect off;proxy_http_version 1.1;proxy_set_header Upgrade $http_upgrade;proxy_set_header Connection "upgrade";proxy_set_header Host $host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}

server {...}

以上为示例代码，并非实际项目中的代码，只是为了演示如何设置跨域规则。

invalid host

运行后打开页面，出现invalid host错误，需要检查几个地方，

  1. 检查vue配置文件中的设置,config文件中的port是否是你运行成功输出在终端的端口，如果你需要前端项目运行于8080端口，请关掉其他运行于8080端口的服务。

我两次遇到这种问题都是因为先运行了其他项目，占了8080端口，导致第二个运行的项目的端口为8081，与conf中的配置不同。

使用v-for 时添加key-Duplicate key detected

在vscode中使用v-for时不添加key会冒红，虽然在 Webstorm中不会，但是也是一种性能优化，所以还是加上。

还需要注意的是，为了性能优化，推荐使用如id此类唯一的参数作为key。与此同时，如果不能确定id为唯一的，使用index作为key与不加key的效果是一样的（如果key重复，控制台会出现Duplicate key detected的warning，不影响渲染）。

这一点的详细阐述可以看看https://github.com/lmk123/blog/issues/73。