华为云服务器部署vue项目

一、修改vue项目文件

修改项目config目录下的index.js,将assetsPublicPath: '/'改为assetsPublicPath:
‘./’,注意,有两处,都要改,不然打包部署到tomcat上面访问是一片空白;还有一点需要注意的就是,webstorm起服务时,需要改回来,不然也是不行的

(将图一右侧箭头指向的assetsPublicPath: '/'改为assetsPublicPath: ‘./’)
华为云服务器部署vue项目

二、将vue项目打包

项目文件目录下运行命令:npm run build,将项目打包好,然后当前项目目录下有一个dist文件夹,该文件夹下有一个index.html和static文件夹

三、登录云服务器

1、启动电脑的远程桌面连接

在本地电脑上,点击开始 或 快捷键“WIN+R"打开“运行”, 在其中输入“mstsc”,点击确定。打开远程桌面连接。
华为云服务器部署vue项目

2、添加WINDOWS凭据

添加WINDOWS凭据,这是百度的教程,https://jingyan.baidu.com/article/851fbc37b2d4333e1e15ab11.html
需要注意的是,在百度第六步教程中,需要填入远程的服务器的IP地址和用户名、密码,大家只要登录华为云服务器,点击右上角控制台,之后再点击弹性云服务器ECS,之后就进入下图了。IP地址和用户名就对应下图的箭头。华为云服务器部署vue项目

3、登录云服务器,并将本地文件上传到云服务器

将我们刚才打包的dist文件上传到云服务器,大家看这篇博客就行,https://blog.****.net/yangsong4353/article/details/95612168

四、将上传到云服务器的代码文件部署到云服务器的tomcat上面

在云服务器的tomcat的webapps文件夹下以项目名称新建一个文件夹,比如smart,然后将打包成功的dist文件夹下面的index.html和static文件夹复制到smart文件夹下,现在就可以启动服务器了,访问正常。