Vue项目打包部署的实战过程记录

下面是Vue项目打包部署的实战过程记录的详细攻略：

1. 环境准备

在进行Vue项目打包部署前，需要准备好以下环境：

• Node.js环境： 因为Vue.js是基于Node.js的，所以需要在本地安装Node.js环境。
• Vue CLI： 在安装好Node.js后，可以使用npm包管理器安装Vue CLI，它是Vue.js的一个命令行工具，可以帮助我们快速构建Vue项目。
• 服务器环境： 打包后的Vue项目需要部署在服务器上，因此需要有一台可用的服务器，并且在服务器上安装好了必要的环境。

2. Vue项目打包

在完成环境准备后，我们就可以进行Vue项目的打包了。在项目的根目录下，使用以下命令进行打包：

vue-cli-service build

这个命令会将我们的Vue项目进行编译和打包，生成一个 dist 目录，包含了所有编译后的静态文件。

3. 上传打包文件到服务器

经过打包后，我们需要将 dist 目录下的文件上传到服务器。可以使用 FTP 工具或者其他文件传输工具来实现。将打包好的文件上传到服务器的指定目录下。

4. 配置服务器环境

在完成上传后，我们需要在服务器上配置必要的环境。例如，需要配置 Nginx 或 Apache 等 Web 服务器，配置好对静态资源的路由。这里以 Nginx 配置为例：

server {
    listen       80;
    server_name  yourdomain.com;

    location / {
        root   /path/to/dist;
        index  index.html;
        try_files $uri $uri/ /index.html;
    }
}

这个配置文件中，/path/to/dist就是我们上传打包文件的目录。可以自定义域名和端口号等信息。

5. 访问网站

完成以上步骤后，就可以访问我们上传到服务器的网站了。在浏览器中输入自定义的域名或者IP地址后，应该能够正常访问网站了。

示例说明

假设我们有一个Vue项目叫做 myproject，在打包部署过程中，我们假定使用的是nginx服务器。

示例一

1. 在myproject根目录下使用命令 vue-cli-service build 进行打包
2. 将打包好的文件上传到 nginx 服务器的 /usr/share/nginx/html 目录下
3. 在 nginx 的配置文件中添加如下配置：

http {
    server {
        listen 80;
        server_name yourdomain.com;

        location / {
            root /usr/share/nginx/html;
            index index.html;
            try_files $uri $uri/ /index.html;
        }
    }
}

这里的 yourdomain.com 是你的域名，在访问时需替换成自己的。

1. 保存并关闭配置文件，重启 nginx。

现在访问 http://yourdomain.com，应该就能看到 myproject 打包后的页面了。

示例二

假设我们的myproject项目使用了vue-router，那么我们需要在nginx的配置中添加路由信息。假设我们有一个路由 /dashboard，在 nginx 的配置文件中添加如下配置：

http {
    server {
        listen 80;
        server_name yourdomain.com;

        location /dashboard {
            alias /usr/share/nginx/html/dashboard;
            index index.html;
            try_files $uri $uri/ /dashboard/index.html;
        }

        location / {
            root /usr/share/nginx/html;
            index index.html;
            try_files $uri $uri/ /index.html;
        }
    }
}

这里的 alias /usr/share/nginx/html/dashboard 是指定了 dashboard 的根目录。如果需要指定更多的路由信息，可以继续添加 location 配置。

保存并关闭配置文件，重启 nginx。现在访问 http://yourdomain.com/dashboard，应该就能看到 myproject 中的 /dashboard 页面了。