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

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

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

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

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

在Nginx中配置静态文件服务示例:

  1. server {
  2. listen 80;
  3. server_name example.com;
  4. location / {
  5. root /var/www/vue-app/dist;
  6. index index.html;
  7. try_files $uri $uri/ /index.html;
  8. }
  9. }

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

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

在Nginx中配置解决刷新404问题示例:

  1. server {
  2. listen 80;
  3. server_name example.com;
  4. location / {
  5. root /var/www/vue-app/dist;
  6. index index.html;
  7. try_files $uri $uri/ /index.html;
  8. }
  9. location /admin {
  10. root /var/www/vue-app/dist;
  11. index index.html;
  12. try_files $uri $uri/ /admin/index.html;
  13. }
  14. }

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


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