vue2.0项目部署到服务器_服务器小白如何将VUE项目部署到服务器

最近工作上的事情，领导让用VUE写个前端出来，

由于部门的人大多负责后台，前端的大多数事务，就直接包到我头上来了。估计后续我VUE写完，也没人负责把网页部署到服务器上，那么咋办，只能自己来了。

对于服务器来说，可以说是一个小白了。可以说什么都是从0开始。

这篇文章不说VUE怎么怎么写，

1、购买腾讯云免费服务器

腾讯云打钱😁😁

买了服务器之后，登录服务器之后，发现是CentOS，就是一片黑，只能输入命令行，咱也不懂咱也不敢问，经过一顿搜索并不知道怎么回事。

然后我决定给他重装成Windows，CentOS看不懂我还会看不懂Windows吗？

大概就是这样

系统重装Windows之后，不能在浏览器登录了，腾讯云给了这个选项

因为我是Mac所以就选第三个，其他的请自行研究了....

2、安装Microsoft Remote Desktop for Mac

跟着教程安装完

配置服务器地址

然后输入系统账号密码就可以连上了。

3、文件传输

在我查找了很多资料的过程中，发现给Windows传文件是很痛苦的一个过程。

可能是我没有找到正确的姿势吧。

这里我们通过共享文件夹传文件，有点像虚拟机。

进去之后选择Floders

然后启动我们的服务器，在我的电脑界面就能看到我们现在手上的这台设备了。

因为是远程连接。所以可能啥的都有可能比较慢(也有可能是免费版本的服务器就是这样= =)

4、服务器中安装及配置Tomcat

我们这里只要走两步就行，不用配置eclipse

1. 安装Java环境 JDK

2. 配置Tomcat

复制代码

这里就不赘述了。照着这个教程一步一步来。

5、Vue打包 及 路径配置

我在这位老哥这里找到了配置办法

假设你要访问的项目名称为hms

在Tomcat的webapps下创建hms文件夹，

在config/index.js文件中，设置assetsPublicPath: '/hms/'

(解释：这里改为这个配置之后，最后编译产生的index.html中相关路径也会带上‘/hms’,不会报404的错误了)

配置productionSourceMap: false

在build/webpack.prod.config.js文件中，找到output，添加publicPath:'./'

output: {

path: config.build.assetsRoot,

filename: utils.assetsPath('js/[name].[chunkhash].js'),

chunkFilename: utils.assetsPath('js/[id].[chunkhash].js'),

publicPath:'./'

},

复制代码

在build/webpack.base.config.js文件中，一样找到output

output: {

path: config.build.assetsRoot,

filename: '[name].js',

publicPath: process.env.NODE_ENV === 'production'

? "./"+config.build.assetsPublicPath

: "./"+config.dev.assetsPublicPath

},

复制代码在cd Vue项目路径运行npm run build命令，生成dist文件夹，包含static和index.html

将dist文件夹中static和index.html复制到Tomcat中webapps的hms文件夹中

启动Tomcat，ip:port/hms，例如：http://localhost:8081/hms/ 即可访问到Vue项目。也可以直接把服务器的地址贴上去 http://182.xxx.xxx.xxx:8080/hms