服务器小白如何将VUE项目部署到服务器

最近工做上的事情，领导让用VUE写个前端出来， 因为部门的人大多负责后台，前端的大多数事务，就直接包到我头上来了。估计后续我VUE写完，也没人负责把网页部署到服务器上，那么咋办，只能本身来了。
对于服务器来讲，能够说是一个小白了。能够说什么都是从0开始。 这篇文章不说VUE怎么怎么写，

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

腾讯云打钱😁😁

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

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

大概就是这样

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

由于我是Mac因此就选第三个，其余的请自行研究了....

二、安装Microsoft Remote Desktop for Mac

跟着教程安装完

配置服务器地址

而后输入系统帐号密码就能够连上了。

三、文件传输

在我查找了不少资料的过程当中，发现给Windows传文件是很痛苦的一个过程。
多是我没有找到正确的姿式吧。

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

进去以后选择 Floders

而后启动咱们的服务器，在 个人电脑界面就能看到咱们如今手上的这台设备了。

由于是远程链接。因此可能啥的都有可能比较慢(也有多是免费版本的服务器就是这样= =)

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

百度经验：jingyan.baidu.com/article/870…

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

1. 安装Java环境 JDK
2. 配置Tomcat 
复制代码

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

五、Vue打包 及 路径配置

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

1. 假设你要访问的项目名称为hms
2. 在Tomcat的webapps下建立hms文件夹，
3. 在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
  },
复制代码

4. 在cd Vue项目路径运行npm run build命令，生成dist文件夹，包含static和index.html
5. 将dist文件夹中static和index.html复制到Tomcat中webapps的hms文件夹中
6. 启动Tomcat，ip:port/hms，例如：http://localhost:8081/hms/ 便可访问到Vue项目。也能够直接把服务器的地址贴上去 http://182.xxx.xxx.xxx:8080/hms