vue项目打包发布上线的方法步骤

以下是“Vue项目打包发布上线的方法步骤”的完整攻略，包括示例说明。

环境准备

• 需要Node.js环境、Vue CLI脚手架工具以及nginx服务器等。
• 在本地电脑上安装Vue CLI脚手架工具：npm install -g @vue/cli
• 创建Vue项目：vue create <project-name>

打包

1. 进入项目所在目录：cd <project-name>
2. 执行打包命令：npm run build
3. 打包完成后，会在项目目录下生成dist文件夹，里面就是打包后的文件。

配置

1. 打开nginx的配置文件，在其中添加一条server信息：

server {
    listen       80; // 监听端口号
    server_name  www.example.com; // 域名
    location / {
        root   /usr/share/nginx/html/; // 指向前端编译后的dist目录
        index  index.html;
        try_files $uri $uri/ /index.html;
    }
}

1. 修改Vue项目中的vue.config.js文件：将打包后的文件输出路径指定为nginx所指向的路径。

module.exports = {
  outputDir: "/usr/share/nginx/html" // nginx指向目录所在路径
}

上线

1. 将打包后的文件上传至nginx服务器指定目录（在示例中是/usr/share/nginx/html）：可以使用FTP工具，也可以使用命令行上传。

scp -r dist [e-mail]:/usr/share/nginx/html

1. 在服务器上执行nginx重启指令，使得更新的代码生效。

sudo systemctl restart nginx

示例说明：

1. 假如我们有个Vue项目的名称为my-project，我们可以在本地使用Vue CLI创建一个项目，然后执行打包命令，如下所示：

vue create my-project
cd my-project
npm run build

这将在my-project目录下生成一个dist文件夹，里面就是我们打包后的文件。

1. 假如我们已经将打包后的代码上传至远程服务器，并确认nginx的配置文件已添加正确的信息，执行如下命令将代码从本地上传至远程服务器：

scp -r dist [e-mail]:/usr/share/nginx/html

这将把dist文件夹下的所有内容上传至位于/usr/share/nginx/html的远程服务器。

通过以上步骤，我们就实现了Vue项目的打包、部署与上线。