ubuntu 18环境下node部署vue打包dist文件的正确姿势

## 前言

随着vue框架的日益普及，越来越多的开发者开始使用vue构建Web应用程序。vue打包后的dist文件通常需要部署到服务器上，以便可以在线访问。在ubuntu 18环境下使用node部署vue打包dist文件是一个常见任务。本文将详细介绍如何进行此操作。

## 步骤

1. **准备工作** 

   在开始部署之前，需要确保已经安装了node.js和vue CLI。如果没有安装，可以通过以下命令进行安装：

sudo apt-get install nodejs
sudo npm install -g vue-cli

2. **打包vue项目** 

使用vue CLI打包vue项目，可以通过以下命令：

vue-cli-service build

这将生成一个名为dist的文件夹，其中包含打包后的dist文件。

3. **上传dist文件到服务器** 

使用FTP或其他文件传输工具将dist文件夹上传到服务器。如果服务器上没有安装node.js，需要先进行安装。

4. **配置服务器** 

在服务器上配置node.js，以便可以运行vue应用。可以通过以下命令进行配置：

sudo apt-get install nodejs
sudo npm install -g pm2

pm2是一个进程管理器，可以帮助管理node.js应用程序。

5. **启动vue应用** 

使用pm2启动vue应用，可以通过以下命令：

pm2 start dist/index.js

这将启动vue应用，并可以在线访问。

## 常见问题

1. **index.html路径错误** 

在部署dist文件时，可能会遇到index.html路径错误。这是因为index.html中的路径是相对于dist文件夹的，在其他文件夹下访问时会报错404。

要解决这个问题，需要将index.html中的路径改为绝对路径。可以使用以下命令进行修改：

sed -i 's//static///dist/static//' dist/index.html

2. **vue应用无法访问** 

如果vue应用无法访问，可能是因为没有正确配置服务器。需要检查是否已经安装了node.js和pm2，并确保已经正确启动vue应用。

## 总结

通过以上步骤，就可以在ubuntu 18环境下使用node部署vue打包dist文件。通过实际操作，你可以学习如何解决index.html路径错误的问题，并正确部署dist文件，从而顺利运行vue应用。