Vue项目部署至阿里云服务器

Vue-cli版本

@vue/cli 4.2.3

项目结构

打包前准备

首先修改vue项目中router的模式，该模式默认为hash，当我们访问项目的网址时会自动在我们的网址中加上’/#/’，也就是说访问路径为：‘localhost:8080/#/home’，我们这里需要改为history，这样访问路径会变成正常的访问路径：‘localhost:8080/home’。
将router/index.js文件中的router中修改为如下即可。

const router = new VueRouter({
  routes,
  mode: 'history'
})

由vue-cli4创建的单页应用并没有vue.config.js文件，因此我们需要再项目中创建该文件，然后插入如下代码：

module.exports = {
  // 基本路径
  publicPath: '../../',	
  // 输出文件目录
  outputDir: 'dist'
}

publicPath: '…/…/'这样配置的原因如下：
在我们使用‘history’模式时，如果打包完以后如果使用这样的配置：publicPath: ‘./’，那么网页将无法访问我们的图片资源，因此需要修改这个路径。
上述配置完成以后即可打包，由于我们服务器使用nginx，所以这里不需要再配置端口。

项目打包

使用npm run build命令打包即可。打包完成后项目中会出现dist目录，点击目录下的index.html文件，如果可以正常访问那么打包成功！

上传服务器并配置nginx

我这里使用的Xshell连接的阿里云服务器，使用Xftp上传文件。
我的打包文件存储在服务器的/home/目录下，我在这里新建了一个目录存放文件。
文件上传成功以后我们接着配置nginx
首先进入nginx的默认安装路径：/etc/nginx,使用vim编辑器编辑nginx.conf文件

server {
        listen       80 default_server;
        listen       [::]:80 default_server;
        server_name  _;
        root         /usr/share/nginx/html;

        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;

        location / {
            root /home/wyg/myblog/dist;  // '你的dist目录存放的位置'
            index index.html;
            autoindex on;
            try_files $uri $uri/ /index.html;
        }
        error_page 404 /404.html;
            location = /40x.html {
        }

        error_page 500 502 503 504 /50x.html;
            location = /50x.html {
        }
    }

配置完成以后直接访问服务器的IP地址或者绑定的域名即可访问到打包好的vue项目。

over，接下来会将服务器部署多个vue项目的方法