Vue

vue

前端Vue部署nginx刷新后404

查看了一下nginx配置，出现问题的配置是这样的：

bash

   server {
        listen       8088;
        server_name  localhost;
 
        location / {
            root   html/dist;
            index  index.html index.htm;
        }
        location /gateway/ {
             rewrite ^/gateway/(.*) /$1 break;
             proxy_set_header Host $host;
             proxy_set_header X-Real-IP $remote_addr;
             proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
             proxy_set_header X-Forwarded-Proto $scheme;
             proxy_connect_timeout 5;
             proxy_pass http://192.168.0.11:9000/;
    }

修改后的配置是这样的

bash

    server {
        listen       8088;
        server_name  localhost;
 
        location / {
            root   html/dist;
            index  index.html index.htm;
            try_files $uri $uri/ /index.html;
        }
        location /gateway/ {
             rewrite ^/gateway/(.*) /$1 break;
             proxy_set_header Host $host;
             proxy_set_header X-Real-IP $remote_addr;
             proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
             proxy_set_header X-Forwarded-Proto $scheme;
             proxy_connect_timeout 5;
             proxy_pass http://192.168.0.11:9000/;
    }

添加了

try_files $uri $uri/ /index.html

然后重启一下nginx问题就解决了。解释：

try_files 表示检查文件是否存在，返回第一个找到的文件，这里设置是index.html内部重定向。另外，还有一种404报错的问题，可能是nginx访问文件权限问题，

打开nginx.conf，第一行默认是这样的

bash

#user  nobody;
worker_processes  1;
 
#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;
 
#pid        logs/nginx.pid;
 
 
events {
    worker_connections  1024;
}
 
以下省略

可能是你访问的路径，需要root权限，而你启动nginx使用的普通用户，权限不足导致访问不到文件，所以可以这么修改：

bash

user  root;
worker_processes  1;
 
#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;
 
#pid        logs/nginx.pid;
 
 
events {
    worker_connections  1024;
}
 
以下省略

页面强制刷新

首先我们知道在vue中，数据的绑定都不用我们操心，例如在data中有一个msg的变量，你修改它，那么在页面上，msg的内容就会自动发生变化。但是如果对于一个复杂的对象，例如一个对象数组，你直接去给数组上某一个元素增加属性，或者直接把数组的length变成0，vue就无法知道发生了改变。

相信大家也遇到过，实际上是赋值的界面上并不渲染

change: function(index) {//增加性别属性
    this.list[index].sex = '男';
},
clear: function() {//清空数组
    this.list.length = 0;
}

解决方案一：this.$set()
可解决这个问题 vue的规范文档里面都有提到过

change: function(index) {//增加性别属性
    this.$set(this.list[index],'sex','男')
},
clear: function() {//清空数组
    this.list=[];
}

解决方案一：this.$forceUpdate()

change: function(index) {
    this.list[index].sex = '男';
    this.$forceUpdate();
},
clear: function() {
    this.list.length = 0;
    this.$forceUpdate();
}

Vue异步更新策略

在数据发生变化时，vue不会立刻更新DOM，而是开启一个队列，把组件更新函数保存在队列中，在同一时间循环中发生的所有数据变更都保存在队列，一次性清空队列，一次性更新。

解决方案 this.$nextTick(回调函数)
在数据发生改变时，渲染DOM之后，会自动执行回调函数

this.banderList = res.data;
this.$nextTick(() => {
   new Swiper('.swiper-container', {
       pagination: '.swiper-pagination',
       paginationClickable: true,
       loop: true,
       autoplay: 4000,
       speed: 300
   });
})

Vue ​

前端Vue部署nginx刷新后404 ​

页面强制刷新 ​

Vue异步更新策略 ​

Vue

前端Vue部署nginx刷新后404

页面强制刷新

Vue异步更新策略