用webpack2打包(包含了vue-router)发布。但在tomcat下出错。

遇到个比较奇怪的问题。用了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 &quot;%r&quot; %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/ 可以正常访问页面。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值