最近工作上的事情,领导让用VUE写个前端出来,
由于部门的人大多负责后台,前端的大多数事务,就直接包到我头上来了。估计后续我VUE写完,也没人负责把网页部署到服务器上,那么咋办,只能自己来了。
对于服务器来说,可以说是一个小白了。可以说什么都是从0开始。
这篇文章不说VUE怎么怎么写,
1、购买腾讯云免费服务器
腾讯云打钱😁😁
买了服务器之后,登录服务器之后,发现是CentOS
,就是一片黑,只能输入命令行,咱也不懂咱也不敢问,经过一顿搜索并不知道怎么回事。
然后我决定给他重装成Windows
,CentOS
看不懂我还会看不懂Windows
吗?
大概就是这样
系统重装Windows
之后,不能在浏览器登录了,腾讯云给了这个选项
因为我是Mac所以就选第三个,其他的请自行研究了....
2、安装Microsoft Remote Desktop for Mac
跟着教程安装完
配置服务器地址
然后输入系统账号密码就可以连上了。
3、文件传输
在我查找了很多资料的过程中,发现给Windows
传文件是很痛苦的一个过程。
可能是我没有找到正确的姿势吧。
这里我们通过共享文件夹
传文件,有点像虚拟机。
Floders
然后启动我们的服务器,在我的电脑
界面就能看到我们现在手上的这台设备了。
因为是远程连接。所以可能啥的都有可能比较慢(也有可能是免费版本的服务器就是这样= =)
4、服务器中安装及配置Tomcat
百度经验:jingyan.baidu.com/article/870…
我们这里只要走两步就行,不用配置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