美文网首页vue2.x学习
webpack打包vue-cli2.x项目的路径问题

webpack打包vue-cli2.x项目的路径问题

作者: WebGiser | 来源:发表于2019-04-13 17:56 被阅读3次

    使用webpack打包vue-cli2.x项目会生成一个dist文件夹,将其复制到tomcat的webapps文件夹下,然后访问http://localhost:8080/dist时通常报404的错误,会发现static下的文件找不到,中间少了一层dist。下面是个人的解决方法:

    1、如果js、json、png等静态文件是放在static文件夹下时,在javascript代码中一定要使用 ./static/ 的形式引入,在html代码中使用类似../../static/的相对路径方式。下面是正确的在vue文件中引入static下静态文件的例子:

    image.png

    2、修改config/index.js文件中build下的assetsPublicPath,把 / 修改为 ./ 。例子如下:

    image.png

    3、运行npm run build命令后,会生成dist文件夹,可以将其重命名后放进tomcat的webapps文件夹下即可。

    相关文章

      网友评论

        本文标题:webpack打包vue-cli2.x项目的路径问题

        本文链接:https://www.haomeiwen.com/subject/edsrwqtx.html