当我们完成了 vue 项目的开发之后，需要将其打包并部署到服务器上，以便我们可以在网络环境下访问项目页面。本文将简要介绍如何打包和部署 vue 项目，并提供一些常见问题的解决方案，方便读者在将 vue 项目部署到服务器时顺利完成。
一、vue项目打包
在开始打包之前，需要安装好 Node.js 和 npm。如果您已经完成了这些步骤，那么可以进入到 Vue 项目的根目录，并依次执行以下命令：
npm run build
这个命令会在项目的根目录下生成一个名字为“dist”的文件夹。在 dist 目录下，会有一个 “index.html” 文件和一个“static”文件夹，它们是我们需要上传到服务器的核心文件。
立即学习“前端免费学习笔记（深入）”；
二、部署至服务器
- 上传至服务器
您可以使用 FTP 工具将 dist 文件夹上传至服务器上，或者使用 SSH 命令将文件传输到服务器上。这里以使用 FTP 为例进行说明。
在上传文件之前，需要确保您已经在服务器上创建好了您的网站根目录。将 dist 文件夹上传至您的网站根目录下，然后确保 index.html 文件和 static 文件夹均在网站根目录下。
- 配置服务器
在将 Vue 项目部署到服务器之前，您需要确保服务器上已经安装了 Node.js 和 npm。
使用 SSH 客户端登录服务器，进入到网站根目录下，执行以下命令：
npm install -g http-server
安装完毕后，执行以下命令启动服务器：
http-server -p 8080
这个命令会在本地的 8080 端口上启动一个服务器。您可以通过 http://您的服务器IP地址:8080 访问您的网站。
- 解决常见问题
在将 Vue 项目部署到服务器上时，可能会遇到一些常见问题。下面是一些可能发生的问题及其解决方案:
1) 访问时出现 404 错误
如果您在访问时出现 404 错误，可能是因为您的服务器没有正确配置好路由。您可以尝试使用 Hash 模式进行路由，修改 Vue 项目的配置文件：
在 src/router/index.js 文件中修改：
const router = new VueRouter({
mode: 'hash',
routes: [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
component: About
}]
})
修改完毕后，重新打包并部署到服务器上，然后重新访问。
2) 静态文件加载失败
如果您的静态文件加载失败，可能是因为您的服务器没有正确配置 MIME 类型。在 Nginx 配置文件中添加以下内容即可解决这个问题：
location / {
add_header Content-Type "text/html";
add_header X-Content-Type-Options nosniff;
}
location ~* .(png|jpg|jpeg|gif|css|js|ico)$ {
add_header Content-Type "image/png";
add_header X-Content-Type-Options nosniff;
}
3) 服务器文件夹访问权限问题
如果您在上传 Vue 项目到服务器时出现 403 错误，可能是因为您的服务器没有正确的文件夹访问权限。在执行 chmod 命令更改文件夹权限即可解决这个问题：
chmod 755 文件夹名称
四、结束语
本文简要介绍了如何打包和部署 Vue 项目，并解决了一些可能出现的问题。希望本文对您在将 Vue 项目部署到服务器上时能够带来一些帮助。在具体操作过程中，还需要根据服务器的操作系统等情况进行具体的调整。祝您顺利完成 Vue 项目的部署。
