前提：
应用没有部署在域名的根部，这个时候文件资源可以为URL 配置 publicPath 前缀。但是public下的图片不受控制。发布后导致找不到图片。
原因分析：
任何放置在 public 文件夹的静态资源都会被简单的复制，而不经过 webpack。引用的时候需要通过绝对路径来引用它们。
参考URL 转换规则
image.png
那么我通过绝对路径引用，也不经过webpack处理，所以对于这部分图片指向的就是根目录，所以才找不到图片。
图片应该放在哪里
我认为静态资源的图片应该放到src/assets 下面，而不应该放到public下。vuecli官网有解释什么时候用public。那么在assets下处理的方法为：
background: url('./src/assets/theme/logo_blue.png') no-repeat center center;
这里有一个注意点：vue2.5及以下版本这种写法没有问题, 2.6就出现这个问题,应该和webpack配置相关 。vue2.6用的是webapack4.0。 需要改为：
background: url('~@/assets/theme/logo_blue.png') no-repeat center center;
总结URL处理规则： webpack资源处理的规则,分为相对路径,没有前缀的路径,带~的路径,相对根目录的路径
1.相对路径: "./assets/logo_blue.png"
2.没有前缀的路径 "assets/logo_blue.png" 被webpack解析为 相对路径
3.带~的路径 "~@/assets/theme/logo_blue.png" 被webpack解析为 require(src/assets/theme/logo_blue.png) 动态引入
@在webpack 被resolve.alias配置下等价于/src
4.相对根目录的路径,在官网被称为绝对路径 "/assets/logo_blue.png" webpack不解析
原文来自于vue项目引入背景图报Module not found: Error: Can't resolve './src/assets/theme/logo_blue.png' in'xxx'错误
目前问题的解决方法
因为不受webpack解析，所以无法直接像publicPath那样直接修改路径。
对应的解决方法有（官网给出的例子）
1.在 public/index.html 或其它通过 html-webpack-plugin 用作模板的 HTML 文件中，你需要通过 <%= BASE_URL %> 设置链接前缀：
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
2.在模板中，用img的情况，首先需要向你的组件传入基础 URL：
data () {
return {
publicPath: process.env.BASE_URL
}
}
然后：
<img :src="`${publicPath}my-image.png`">
3.在样式文件中使用（以 sass/scss 为例).background中。
因为 sass 文件中无法获取环境变量或 webpack 内的配置，于是最直接的方法就是自定义一个变量，然后在每个需要使用到它的文件引用它。
// config.scss
$baseUrl: "/";
// icon.scss
@import "config"
.icon-test {
display: inline-block;
background: url($baseUrl + 'imgs/icon_test.png') no-repeat;
width: 10px;
height: 10px;
}
这样做还是有比较大的麻烦：
- 如果生产环境和开发环境的
baseUrl不同，每次转换环境去编译都要去手动修改这个变量，十分之麻烦而且可能出现错误； - 两处地方相同的定义，不方便代码的维护；
- 在关于 相对路径 的坑会涉及到，每次引用
config.scss的路径并不一定是一样的，且很容易出现编译错误；
那么，有没有什么办法能避免人工操作、避免多次的定义并且避免使用可能潜在错误的引用呢？幸亏的确是有的！ sass-loader 提供了一个 data 选项，可以为全局注入变量或样式文件;
// vue.config.js
const baseUrl = process.env.NODE_ENV === 'production' ? '/sub/' : '/';
module.exports = {
baseUrl,
css: {
loaderOptions: {
sass: {
data: `$baseUrl: "${baseUrl}";`
}
}
}
}
这样我们就可以在全局的 sass 文件中使用 $baseUrl 这个变量了，而且在只定义一次的情况下，能根据编译环境变化而变化。
4.修改nginx 配置，以部署目录espace为例
upstream a.xx.com{
server 127.0.0.1:8081;
}
server {
listen 80;
server_name a.xx.com;
location /{
proxy_pass http://a.xx.com;
}
location ^~/images/ {
proxy_redirect off;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_pass http://127.0.0.1:8001/images/;
}
location ^~/espace/ {
proxy_redirect off;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_pass http://127.0.0.1:8001/;
}
}
网友评论