Vue项目如何部署？布署服务器后刷新404问题怎么解决？-Vue面试指南

当前位置:　首页>> 技术小册>> Vue面试指南

Vue项目的部署通常有两种方式：静态文件部署和服务器部署。静态文件部署适用于不需要后端支持的单页应用，可以将编译后的静态文件部署到任何支持静态文件服务的服务器上；服务器部署适用于需要后端支持的多页应用，需要将编译后的文件部署到服务器上，并配合后端框架一起运行。

在这里，我们以静态文件部署为例来介绍Vue项目的部署方式。

**编译项目**
首先，需要使用npm run build或者yarn build命令来编译Vue项目。该命令会在项目根目录下生成一个dist目录，其中包含了编译后的静态文件。

**部署到服务器**
将编译后的静态文件上传到服务器上，可以使用FTP或者SSH等方式上传文件。上传完成后，可以通过Nginx或者Apache等Web服务器来提供静态文件服务。

在Nginx中配置静态文件服务示例：
```
server {
  listen 80;
  server_name example.com;

location / {
    root /var/www/vue-app/dist;
    index index.html;
    try_files $uri $uri/ /index.html;
  }
}
```
在上述配置中，我们指定监听80端口，服务器名为example.com。location /表示处理所有请求，root指定静态文件的根目录，index指定默认的索引文件为index.html，try_files指定当请求的文件不存在时，重定向到index.html文件。

解决刷新404问题
部署完成后，我们会发现在访问Vue项目的页面时，单击链接跳转没有问题，但是在浏览器地址栏中输入地址或者刷新页面时会出现404错误。这是因为服务器并不知道如何处理这个URL路径，需要配置一下服务器以允许访问这个URL。

在Nginx中配置解决刷新404问题示例：
```
server {
  listen 80;
  server_name example.com;

location / {
    root /var/www/vue-app/dist;
    index index.html;
    try_files $uri $uri/ /index.html;
  }

location /admin {
    root /var/www/vue-app/dist;
    index index.html;
    try_files $uri $uri/ /admin/index.html;
  }
}
```
在上述配置中，我们添加了一个新的location块，用于处理/admin路径的请求。在这个块中，我们使用root指定静态文件的根目录，使用try_files指定当请求的文件不存在时，重定向到admin/index.html文件。这样就可以解决刷新404问题了。

该分类下的相关小册推荐：

VUE组件基础与实战

Vue原理与源码解析

vue项目构建基础入门与实战

Vue源码完全解析

Vue.js从入门到精通(二)

TypeScript和Vue从入门到精通(五)

移动端开发指南

vuejs组件实例与底层原理精讲

Vue.js从入门到精通(四)

Vue3技术解密

Vue.js从入门到精通(一)

TypeScript和Vue从入门到精通(四)