Vue发布项目实例讲解

下面就为大家详细介绍一下Vue发布项目的完整攻略。

1. 打包项目

在Vue项目开发完成后，需要将项目进行打包。Vue提供了一个命令行工具Vue CLI，可以使用Vue CLI将项目进行打包。

首先需要安装Vue CLI，可以在命令行中输入以下命令进行安装：

npm install -g @vue/cli

安装完成后，在命令行中进入到项目根目录，使用以下命令进行项目打包：

npm run build

在执行该命令后，Vue会将项目打包成一个静态文件，可以通过浏览器访问。

2. 部署项目

打包完成后，需要将项目部署到服务器上才能访问。下面介绍两种常见的部署方式。

2.1 部署到Nginx

首先需要安装Nginx，可以在命令行中输入以下命令进行安装：

sudo apt-get install nginx

安装完成后，在命令行中进入到Nginx的配置目录，通常为：

/etc/nginx/

打开Nginx的配置文件nginx.conf，将以下代码添加到http中：

server { listen 80; server_name your_domain.com; root /path/to/your/project/dist; index index.html; location / { try_files $uri $uri/ /index.html; } }

保存配置文件后，执行以下命令重启Nginx：

sudo service nginx restart

Nginx就会将Vue项目部署到服务器上，可以通过域名或IP访问项目了。

2.2 部署到Apache

首先需要安装Apache，可以在命令行中输入以下命令进行安装：

sudo apt-get install apache2

安装完成后，在命令行中进入到Apache的配置目录，通常为：

/etc/apache2/sites-available/

创建一个新的配置文件，命名为your_domain.com.conf，将以下代码添加到文件中：

```

ServerName your_domain.com

  DocumentRoot /path/to/your/project/dist

  <Directory /path/to/your/project/dist/>
      Options Indexes FollowSymLinks MultiViews
      AllowOverride All
      Order allow,deny
      allow from all
  </Directory>

  ErrorLog /var/log/apache2/your_domain.com_error.log
  CustomLog /var/log/apache2/your_domain.com_access.log combined

```

保存配置文件后，执行以下命令启用配置文件：

sudo a2ensite your_domain.com.conf

重启Apache服务器：

sudo service apache2 restart

Apache就会将Vue项目部署到服务器上，可以通过域名或IP访问项目了。

3. 示例说明

这里给大家提供两个示例：

示例一

假设我们有一个Vue项目，项目地址为：

https://github.com/user/project.git

使用上面介绍的方法打包完成后，我们可以将项目部署到Nginx服务器上。

将打包好的文件上传到服务器上，路径为：

/var/www/project/

然后，在Nginx配置文件nginx.conf添加以下代码：

server {
    listen 80;
    server_name your_domain.com;
    root /var/www/project;
    index index.html;
    location / {
        try_files $uri $uri/ /index.html;
    }
}

保存配置文件后，执行以下命令重启Nginx：

sudo service nginx restart

现在我们可以通过以下方式访问Vue项目：

http://your.domain.com/

示例二

假设我们有一个Vue项目，代码已经上传到了服务器上，路径为：

/var/www/project/

使用上面介绍的方法打包完成后，我们可以将项目部署到Apache服务器上。

在Apache配置文件中添加以下代码：

<VirtualHost *:80>
    ServerName your_domain.com

    DocumentRoot /var/www/project

    <Directory /var/www/project/>
        Options Indexes FollowSymLinks MultiViews
        AllowOverride All
        Order allow,deny
        allow from all
    </Directory>

    ErrorLog /var/log/apache2/your_domain.com_error.log
    CustomLog /var/log/apache2/your_domain.com_access.log combined
</VirtualHost>

保存配置文件后，执行以下命令启用配置文件：