vue 项目部署nginx刷新界面的时候报错404

一、现象

二、解决方式

http {
    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;

    sendfile            on;
    tcp_nopush          on;
    tcp_nodelay         on;
    keepalive_timeout   65;
    types_hash_max_size 4096;

    include             /etc/nginx/mime.types;
    default_type        application/octet-stream;

    # Load modular configuration files from the /etc/nginx/conf.d directory.
    # See http://nginx.org/en/docs/ngx_core_module.html#include
    # for more information.
    include /etc/nginx/conf.d/*.conf;

    server {
        listen       8071;
        server_name  101.42.104.247;
        location / {
            root /home/intelligent_evaluation_of_rock_burst/development_project/dist;
            index index.html index.htm;
            try_files $uri $uri/ /index.html; //加上这个就不会了,具体原理待研究
        }
        #动态请求
        location /api{
          include uwsgi_params;
          uwsgi_pass 127.0.0.1:5000;
        }

        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;

 nginx -s reload 重新加载nginx

nginx -t 测试nginx是否正常

### 使用Docker部署基于Vue.js和Nginx的前端应用程序 为了实现这一目标,需要创建一个适合于生产环境的构建流程并将其容器化。以下是详细的说明: #### 准备工作 确保已经完成项目的开发阶段,并且能够通过`yarn run build`命令成功编译项目[^4]。 ```bash yarn run build ``` 这一步会生成位于`dist`目录中的静态资源文件,这些文件就是最终要被Nginx提供服务的内容。 #### 创建Dockerfile 在项目根目录下新建名为`Dockerfile`的文件,内容如下所示: ```dockerfile # 使用官方Node镜像作为基础镜像来安装依赖项 FROM node:alpine AS builder WORKDIR /app COPY package*.json ./ RUN npm install COPY . . # 构建应用 RUN npm run build # 切换至nginx镜像以供实际运行时使用 FROM nginx:stable-alpine # 复制之前构建好的静态文件到默认的html目录中 COPY --from=builder /app/dist /usr/share/nginx/html EXPOSE 80 CMD ["nginx", "-g", "daemon off;"] ``` 此多阶段构建方法先利用Node.js环境执行构建过程,再切换到轻量级的Nginx镜像用于发布静态页面,从而减小了最终镜像大小。 #### 构建与启动容器 有了上述准备之后,就可以按照下面的方式来进行操作了: - **构建 Docker Image** ```bash docker build -t vue-frontend-app . ``` - **启动 Docker Container** 可以直接使用简单的`docker run`指令或者更推荐的做法是采用`docker-compose.yml`定义服务组合以便管理和维护更加方便。 对于单个容器来说: ```bash docker run -d --name VueFrontendApp -p 80:80 vue-frontend-app ``` 如果选择使用Docker Compose,则需编写相应的配置文件如`docker-compose.yml`: ```yaml version: '3' services: web: image: vue-frontend-app ports: - "80:80" restart: always ``` 接着可以通过以下命令一键启动整个栈: ```bash docker-compose up -d ``` 这样就完成了从源码到可访问Web站点的过程,在浏览器里输入服务器IP地址即可看到由Vue.js驱动的应用界面。 #### 配置Nginx支持历史模式路由 为了让Vue Router的历史模式正常运作,还需要适当调整Nginx设置使得所有未匹配到具体文件路径的请求都被重定向回首页处理。这部分已经在提供的Nginx配置片段中有体现[^2]: ```nginx location / { root /usr/share/nginx/html; index index.html; try_files $uri $uri/ /index.html; } ``` 这段配置保证即使刷新页面也不会因为找不到对应URL而报错,而是交还给前端框架去解析路由。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值