vue-cli打包访问静态资源404解决方案

使用vue-cli生产打包，把代码放到服务器上访问的时候，不少同学会看到页面一片空白，打开控制台，会发现是某些资源文件找不到，如图：其实这里是因为vue-cli的webpack打包配置静态文件访问路径不对，配置文件路径如图：在这个文件下面找到生产(build)配置：要解决静态文件访问路径问题只需要修改配置中的assetsPublicPath字段即可。如果你的服务器静态文...

PromiseKeeping

13846人浏览 · 2018-07-27 17:16:23

PromiseKeeping · 2018-07-27 17:16:23 发布

使用vue-cli生产打包，把代码放到服务器上访问的时候，不少同学会看到页面一片空白，打开控制台，会发现是某些资源文件找不到，如图：
这里写图片描述

其实这里是因为vue-cli的webpack打包配置静态文件访问路径不对，配置文件路径如图：
这里写图片描述
在这个文件下面找到生产(build)配置：

要解决静态文件访问路径问题只需要修改配置中的assetsPublicPath字段即可。

如果你的服务器静态文件路径是这样的：

apache-tomcat-8.0.47
- webapps
  - staticFile
    - mobile
      - index.html
      - static

将路径写成这样即可访问静态资源：
这里写图片描述

资源访问成功状态：
这里写图片描述

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^