遇到个比较奇怪的问题。用了vue-cli初始化的项目,包含了vue-router模板。但发布到tomcat下面居然报错。内容是:
192.168.0.55/:1 GET http://192.168.0.55:8080/stat...
在开发模式下调试程序并没有报错。为了证实不是我程序产生的问题,我用vue-cli初始化了一个空项目,一个字都没改。居然报错的内容一样。不知道是什么情况。
我存放程序的绝对路径为C:\apache-tomcat-8.0.39\webapps\。请问assetsPublicPath: '/',我应该怎么改?
配置tomcat中的虚拟目录
修改server.xml
<Host name="localhost" appBase="c:\dist"
unpackWARs="true" autoDeploy="true">
<Valve className="org.apache.catalina.valves.AccessLogValve" directory="logs"
prefix="localhost_access_log" suffix=".txt"
pattern="%h %l %u %t "%r" %s %b" />
<Context path="" docBase="c:\dist" crossContext="true" debug="0" reloadable="true" trusted="false" >
</Context>
</Host>
appBase="c:dist"是需要修改的。
Context标签是需要自己添加的。
修改完后的效果是:将c:\dist作为虚拟目录的根目录。
配置webpack中的发布目录
如果要发布在虚拟目录根目录下的survey目录下,形式如:http://192.168.0.55:8080/survey/
则需修改config/index.js中 build下的 assetsPublicPath: '/',
改为assetsPublicPath: '/survey/'
需要注意
build完程序后,需要将dist目录下面的所有文件copy到虚拟目录下,如上面提到的survey下。不要复制dist目录本身。
说明:
这里的 assetsPublicPath 指你最终 build 生成的文件会放到服务器的什么路径下,注意,这里的路径不是文件路径,而是 URL 路径,例如:设置为 assetsPublicPath: '/dist/',
,则生成的 index.html 内容如下:
<!DOCTYPE html><html><head><meta charset=utf-8><title>vue2</title><link href=/dist/static/css/app.cf4142b4133de7469c742316f1de4fa0.css rel=stylesheet></head><body><div id=app></div><script type=text/javascript src=/dist/static/js/manifest.c66326e7fa2d344ea87c.js></script><script type=text/javascript src=/dist/static/js/vendor.91f21c3602fc68b682d3.js></script><script type=text/javascript src=/dist/static/js/app.b019d6896d3073eca0f0.js></script></body></html>
注意其中的 link 和 script 元素中的路径已经变成了 /dist/static/...
此时,在项目目录下运行 live-server,并在浏览器中访问 http://localhost:8080/survey/ 可以正常访问页面。