Vue项目webpack打包部署到服务器
这篇博文主要说的就是我今天遇到的问题,而且在经过我的询问,好多人在打包部署的时候都遇到了一些问题,下面就来说下,如何将Vue项目放置在服务器上,这里以Tomcat为例。
必须要配置的就是/config/index.js
在vue-cli webpack的模板下的/config/index.js
,我们可以看到assetsPublicPath
这个键,并且这个东西还出现了两次,我第一次打包的时候,只是修改了最下面的assetsPublicPath
,将它从'/'
变为了./
,然后我就执行了npm run build
,打包成功之后,可以看到项目中会多出来一个文件夹,就是dist
,里面有一个static
文件夹和index.html
,然后我就将dist
目录下的文件拷贝到Tomcat服务器下,会发现访问到的是一个空白页面,但是当我把它放在..\webapps\ROOT
目录下,它就可以访问了
Tomcat下面的目录结构:
但是这肯定是不行的,然后我就开始寻找答案,也根据别人的一些步骤做了下来,后来发现还是有一些问题的,没有办法访问到主页面,虽然吧,一直都没成功,但是我也没放弃,然后就综合了一下问答里面别人说的,进行了几次尝试,最后成功了。(给大家一个小建议:别放弃就好)。
下面的就是我的config/index.js
的配置:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
可以发现,我就改了两处,就是assetsPublicPath所对应的值,我这里用的是./
,我也用webapps下的命的项目名试过,只是没得到我想要的结果,后来我还是改成了./
使用vue-router的情况
当你在项目中使用vue-router
的时候,就需要给src/router/index.js
添点东西,如下面:
- 1
- 2
- 3
- 4
- 5
然后执行npm run dev
,将打包后的文件放在Tomcat的目录下的WebApps下的ttms中,然后,就可以访问到了:http://localhost:8080/ttms/