Vue CLI 3.x 自动部署项目至服务器的方法

这里我为大家讲解如何使用Vue CLI 3.x自动部署项目至服务器的详细步骤。

什么是Vue CLI 3.x自动部署？

Vue CLI 3.x自动部署是指通过Vue CLI 3.x提供的自动化工具，将项目自动部署到远程服务器上。使用起来相当方便快捷，可以极大地提高团队的开发效率。

准备工作

在使用Vue CLI 3.x自动部署功能之前，需要先安装好以下软件：
- Node.js和npm：用于安装Vue CLI 3.x
- Git：用于将代码上传到服务器

步骤

步骤一：安装Vue CLI 3.x

在终端中运行以下命令，安装Vue CLI 3.x：

npm install -g @vue/cli

安装完成后，运行以下命令来检查是否成功安装：

vue --version

如果输出版本号，则表示安装成功。

步骤二：创建Vue项目

在终端中运行以下命令，创建Vue项目：

vue create my-project

其中my-project为你的项目名称，运行该命令后，根据提示选择需要的配置即可创建项目。完成后进入my-project目录。

步骤三：安装依赖

在my-project目录下运行以下命令，安装项目需要的依赖：

npm install

步骤四：配置自动部署

首先需要在服务器上配置好SSH连接，确保可以通过SSH连接到服务器，然后在本地终端中打开my-project项目的根目录下的vue.config.js文件，在该文件中添加如下配置：

module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? '/my-project/'
    : '/',
  devServer: {
    port: 8080,
    host: '0.0.0.0',
  },
  configureWebpack: {
    devtool: 'source-map',
  },
  chainWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      config.plugin('uglifyjs-webpack-plugin')
        .use(require('uglifyjs-webpack-plugin'), [{
          uglifyOptions: {
            compress: {
              warnings: false,
              drop_console: true,
              drop_debugger: true,
              pure_funcs: ['console.log'],
            },
          },
        }]);
    }
  },
};

其中publicPath为我们项目的基础路径，在这里设置为/my-project/，devServer配置运行项目时的端口和地址，configureWebpack配置生成的代码要如何排版，chainWebpack配置webpack打包优化和混淆等相关。

接着，在项目的根目录下，新建一个叫做.env.production的文件，并在其中添加如下内容：

NODE_ENV=production

这个文件的作用是告诉Vue CLI 3.x，在执行npm run build命令时应该使用哪种环境。

最后，在package.json文件中的scripts字段中添加如下命令：

"deploy": "npm run build && scp -r dist/* [e-mail]:/var/www/my-project"

这个命令会执行以下两个步骤：
- 运行npm run build命令，将项目打包到/dist目录下。
- 运行scp命令将dist目录中的文件上传到服务器上的/var/www/my-project目录中。

其中，[e-mail]为你服务器的SSH登录名和地址，/var/www/my-project为你项目在服务器上的文件夹路径。

步骤五：测试自动部署

在终端中运行以下命令，执行自动部署：

npm run deploy

如果一切正常，该命令会在上传完成后自动退出。此时，我们在浏览器中访问http://example.com/my-project就可以看到我们部署在服务器上的网站了。

示例

下面我将通过两个示例说明如何在Ubuntu和CentOS两个不同的Linux系统下使用Vue CLI 3.x自动部署。

示例1：在Ubuntu系统下使用Vue CLI 3.x自动部署

Step 1： 在Ubuntu系统下安装Node.js和Git

在Ubuntu系统中，Node.js和Git的安装很方便，只需要在终端中运行以下命令即可：

sudo apt-get install nodejs
sudo apt-get install npm
sudo apt-get install git

Step 2： 创建Vue项目

在终端中运行以下命令，创建Vue项目：

vue create my-project

Step 3：配置自动部署

按照上面的步骤四，在my-project项目的根目录下打开vue.config.js文件，并添加相关配置。

Step 4：测试自动部署

在终端中运行以下命令，执行自动部署：

npm run deploy

示例 2：在CentOS系统下使用Vue CLI 3.x自动部署

Step 1： 在CentOS系统下安装Node.js和Git

在CentOS系统中，Node.js和Git的安装稍微有点麻烦，需要使用nvm来安装Node.js，而Git则需要手动编译安装。具体步骤如下：

1. 安装nvm

在终端中运行以下命令，安装nvm：

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash

安装完成后，执行以下命令，使nvm生效：

source ~/.bashrc

1. 安装Node.js

在终端中运行以下命令，安装Node.js：

nvm ls-remote
nvm install v10.15.1 // 下载指定版本
nvm use v10.15.1 // 使用指定版本

1. 安装Git

在终端中运行以下命令，安装Git依赖：

sudo yum install curl-devel expat-devel gettext-devel openssl-devel zlib-devel perl-ExtUtils-MakeMaker autoconf

然后，下载并编译安装Git：

curl -O https://mirrors.edge.kernel.org/pub/software/scm/git/git-2.16.0.tar.gz
tar xvfz git-2.16.0.tar.gz
cd git-2.16.0
make prefix=/usr/local all
sudo make prefix=/usr/local install

安装完成后，运行以下命令配置一下用户名和邮箱即可：

git config --global user.name "Your Name"
git config --global user.email "[e-mail]"

Step 2： 创建Vue项目

在终端中运行以下命令，创建Vue项目：

vue create my-project

Step 3：配置自动部署

按照上面的步骤四，在my-project项目的根目录下打开vue.config.js文件，并添加相关配置。

Step 4：测试自动部署

在终端中运行以下命令，执行自动部署：

npm run deploy

好了，以上就是使用Vue CLI 3.x自动部署项目至服务器的完整攻略。