Web项目（Vue）部署到阿里云服务器【超详细】

超详细Vue项目部署篇！！！

小白的部署之路

前段时间白嫖了一年的阿里云服务器，想着手上有个项目，那就部署上去吧。找了很多教程，没有一篇是完整细致的，对于小白的我来说太难了，然后就进行了一天的踩坑之路。最后一人血书写了此文记录，有写的不对的地方希望大佬们能加以指正。希望我的笔记对大家有所帮助！

将大象放进冰箱有几个步骤？打开冰箱，将大象放进去，关上冰箱。巧了，我觉得项目部署呢，刚刚好也是三步：打包项目–>搭建服务器环境–>将项目放到环境中。让我们开始吧！！！

一、打包Vue项目

1、先将项目打包，生成dist文件夹，但是打包之前还要进行一些配置，不然打包之后index.html打开会是空白的，并且报错，因为没有拿到资源。
网上教程有说修改config/index.js，可是我的是Vue-cli4，根本没有这个文件夹了啊，所以对于cli3/cli4的，咱们就得自己在项目文件下创建vue.config.js文件夹，然后加入以下代码：

module.exports = {
  publicPath: "./",
  assetsDir: "static",
  outputDir: 'dist',
}

2、之后，我们还要在router文件夹下的index.js里面加一个base路径，如果你设置的路由为history模式，可以改为hash或者注释掉。

const router = new VueRouter({
  mode: 'hash',
  base: process.env.BASE_URL,
  routes
})

3、终端运行 npm run build，生成dist文件夹，dist文件夹中包含static和index.html。
我们待会要将dist文件夹复制到Tomcat中webapps的文件夹下。
至此，项目打包完成。

二、购买阿里云服务器以及相关配置

1、购买服务器。我买的是Windows Server 2019。

2、登录