Vue如何打包上传至服务器？及其步骤。打包后刷新页面404怎么解决？

风与烈酒2024-05-17 11:37

Vue打包并上传至服务器的详细步骤如下：

一、Vue打包

打开你的Vue项目所在的文件夹，使用VSCode或其他你喜欢的编辑器打开。
在VSCode的终端中，输入npm run build（假设你的package.json文件中已经配置好了这个命令）。这个命令会启动Vue的打包过程，将你的项目打包成一个可以在服务器上运行的静态文件。
打包完成后，你会在项目根目录下看到一个名为dist的文件夹，这个文件夹中就是打包后的静态文件。

二、上传至服务器

使用FTP工具（如FileZilla、WinSCP等）或者Git命令（如果你的服务器支持Git部署）将dist文件夹中的所有文件上传到服务器上的某个目录（如/var/www/html/your-project）。
确保服务器上的Web服务器（如Nginx、Apache等）已经配置好了该目录为Web根目录，以便可以通过浏览器访问到这些文件。

关于打包后刷新页面出现404的问题，这通常是因为Vue项目的路由模式设置不当或者服务器配置不正确导致的。下面给出两种解决方法：

方法一：修改路由模式为hash模式

在Vue的路由配置文件中（通常是src/router/index.js），将路由模式从history改为hash。这样，当你在单页应用中切换路由时，URL会以#开头，例如http://your-domain.com/#/about。这种模式下，服务器不会尝试去加载实际的/about页面，因此不会出现404错误。但是，这会使URL看起来不太友好。

方法二：配置服务器以支持history模式

如果你希望使用更友好的URL（即不包含#），你可以配置服务器以支持Vue的history模式。这通常需要在服务器的配置文件中添加一些规则，以便当服务器收到一个不存在的路径请求时，能够返回Vue应用的入口文件（通常是index.html）。具体的配置方法取决于你使用的服务器和Web服务器软件。以下是一个Nginx服务器的配置示例：

TypeScript 复制代码

location / {  
  try_files $uri $uri/ /index.html;  
}

这个配置告诉Nginx，当收到一个请求时，首先尝试返回与请求路径对应的文件或目录（$uri和$uri/），如果这些都不存在，就返回index.html文件。这样，无论用户访问哪个路径，都会返回Vue应用的入口文件，然后由Vue路由来处理具体的路径。