vue中如何图片等静态资源如何引入代码中?如何解决打包后部署js,css文件404?静态资源图片路径找不到?publicPath设置原理?
① 静态资源如何引入代码中(分为src/assets & public)
首先说说这两个文件夹区别:当放在public中时是不经过webpack打包编译 原样输出到dist里面 而src/assets中会经过webpack处理比如base64等等
<template>
<div id="app">
<strong>均在src下assets文件操作图片</strong>
<h4>1.第一种方式:html里面--assets下面的相对路径-直接赋值src</h4>
<img alt="Vue logo" src="./assets/logo.png" />
<h4>2.第二种方式(错误):html里面-v-bind-data里面变量值为url string类型-assets下面的相对路径</h4>
<img alt="Vue logo" :src="img" />
<h4>3.第二种方式改版1(正确):html里面-v-bind-data里面变量值为require(url)-assets下面的相对路径</h4>
<img alt="Vue logo" :src="img2" />
<h4>4.第二种方式改版2(正确):import引入assets下面的相对路径-对应data中声明变量</h4>
<img alt="Vue logo" :src="img3" />
<h4>5.第三种方式:css类样式中-background引入-assets下面的相对路径</h4>
<div class="test"></div>
<h4>6.第四种方式(错误):style样式中-background引入-assets下面的相对路径</h4>
<div style="width:100px;height:100px;background:url('./assets/test3.png');border:1px solid blue;margin:0 auto;"></div>
<h4>7.第四种方式(正确):动态style样式中-url拼接data变量-如上面例子3 4</h4>
<div :style="`width:100px;height:100px;background:url(${img2});border:1px solid blue;margin:0 auto;`"></div>
<hr />
<strong>均操作public/static下图片(默认为根目录路径 若实际不是则需要设置publicPath来指定路径前缀)</strong>
<h4>1.第一种方式(本地生效 打包后不生效):html里面--public下面的绝对路径(绝对路径会自动指向public文件)--直接赋值src</h4>
<img alt="Vue logo" src="/static/test.png" />
<img alt="Vue logo" src="/test4.png" />
<h4>2.第二种方式:html里面--public下面的相对路径--直接赋值src</h4>
<img alt="Vue logo" src="../public/static/test.png" />
<img alt="Vue logo" src="../public/test4.png" />
<h4>3.第三种方式:html里面--v-bind-data里面变量值为绝对路径</h4>
<img alt="Vue logo" :src="item.img" v-for="(item,index) in ds" :key="index"/>
</div>
</template>
<script>
import img3 from './assets/test3.png'
export default {
name: "App",
data(){
return {
img:'./assets/test.png',
img2:require('./assets/test.png'),
img3,
// v-bind
staticImg:'/test4.png',
staticImg2:require('../public/test4.png'),
ds:[{img:'/test4.png'}]
}
}
};
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
.test{
background:url('./assets/test2.png');
width:100px;
height:100px;
margin:0 auto;
}
</style>
本地启动 除了错误示范 其他均能找到图片
![4.png](https://i-blog.csdnimg.cn/blog_migrate/be7873206a959b9e053434b3def09975.png)
![1.png](https://i-blog.csdnimg.cn/blog_migrate/aebae0786911e3adc4fe0fa1fe788449.png)
![2.png](https://i-blog.csdnimg.cn/blog_migrate/84b9745d5f27be49bd855d4e6471660f.png)
![3.png](https://i-blog.csdnimg.cn/blog_migrate/4ab5c2e41a2d38137ca3d9eec59e7736.png)
当我们打包部署服务器时 这里有区别就是若我们项目在根目录下时 之前我们在代码里面写的绝对路径下访问public静态资源没问题 若我们项目部署的不是根目录 则以绝对路径引入的public会找不到 而以相对路径引入的public文件能找到 其他方案除错误实例外均能找到图片
接下来就牵出了 如何配置nginx 我在本地下载安装了nginx 找到配置文件nginx.conf 此时nginx默认的静态资源目录在html目录下 这里也就牵出了为生命部署后js,css找不到及publicPath如何设置了
a. 当我们配置 publicPath:'/'且dist文件下级内容全部放在html文件下面
此时的nginx配置项为:
location /test {
index index.html index.htm;
try_files $uri $uri/ /index.html last;
}
// 因为默认路径以html为根路径 所以这里只需设置找到当前目录下的index.html
![5.png](https://i-blog.csdnimg.cn/blog_migrate/a1462f961be0b8edeb39eb8fa4e65f70.png)
经过打包部署后发现 除了上面错误实例外 其他不管assets还是Public(相对路径&绝对路径)均成功显示
b.当我们将dist文件夹下级内容全部放在html文件叫xxx文件下面 由于我们打包出来的文件并没有放在根目录下面而是根目录下面xxx路径下面 所以这个时候publicPath配置就显得很重要了 它得配置就是为了我们文件在根目录下怎么去找对应得js,css等等资源由于放在了xxx下面 即我们需要给publicPath:'/xxx'配置
此时的nginx配置项为:
location /test {
root html/xxx; // 这里的root指当我们访问/test路由时 会替换成去找服务器下地址了html/xxx
index index.html index.htm;
try_files $uri $uri/ /index.html last;
}
// 这里我觉得我们平时在部署前端项目时 需要关注的
第一个点就是先怎么配置路由去找到我们指定的静态文件 比如一般前端打包后都以index.html为入口 所以我们需要改写nginx配置来首先满足找到index.html
第二个点就是检查我们前端打包后需要访问的js,css等文件是否能访问 也就是基于我们的静态文件到底是丢在相对于根目录的哪个路径下 需要根据这个来配置我们的publicPath
总结来说就是 首页路由配置 -> nginx配置
应用文件路径 -> 相对根目录来配置
除了root改写路径匹配 还有一种方式就是使用alias别名 它与root的区别就是root是在你请求前面拼接上root(此时不用管斜杠多一个也好少一个也好)
而alias是匹配并替换(个别情况需要关心斜杠的问题)
location /test {
alias html/xxx
index index.html index.htm;
try_files $uri $uri/ /index.html last;
}
这里它会将/test 匹配成html/xxx由于我们这里静态资源并没有跟/test有关 所以它的作用就跟root一样了
具体root跟alias区别参考这篇文章 https://www.jianshu.com/p/4be0d5882ec5
![6.png](https://i-blog.csdnimg.cn/blog_migrate/bd316dd420abb7cf2e270ea7d9058b60.png)
经过打包部署后发现 除了上面错误实例外 还存在我们使用绝对路径访问public文件也显示不出来但是public相对路径能访问 原因就是我们现在的静态文件并不在根目录了 而是在xxx下面 所以我们需要在前端代码里面去动态的绑定这个前缀比如:src=${process.env.BASE_URL}/static/test.png
c. 若此时我们的静态文件并没有放在html根目录文件下 而是放在了跟html同级的www文件夹下的test文件夹里面 按照b方案的思路 我们来配置下 首先定位到index.html身上
location /new {
root www/test
index index.html index.htm;
try_files $uri $uri/ /index.html last;
}
此时我们访问应用 结果index.html能访问 但是js,css却找不到 通过nginx的error.log我们可以发现 它始终都在匹配html下的js,css 但是我们文件却在www/test下面 故我们可以让其他静态文件也定位到www/test下面所以需要再添加一组location匹配
location /new { // 这个满足找到入口文件
root www/test
index index.html index.htm;
try_files $uri $uri/ /index.html last;
}
location ~* \.(css|gif|ico|jpg|js|png|ttf|woff)$ { // 这个满足应用找静态文件路径
root www/test;
index index.html index.htm;
try_files $uri $uri/ /index.html last;
}
那么所有都可以定位到www/test 故此时我们的publicPath:'/'即可
![7.png](https://i-blog.csdnimg.cn/blog_migrate/8f2c2492dbdde262ad8efc0482ac1507.png)
d. 既然我们的静态资源路径变了 那有没有直接改变nginx访问路径的配置 我目前想到的就是如下
location / { // 这个满足应用找静态文件路径js,css等
root www/test;
index index.html index.htm;
try_files $uri $uri/ /index.html last;
}
location /new { // 这个满足找到入口文件
root www/test;
index index.html index.htm;
try_files $uri $uri/ /index.html last;
}
publicPath:'/'即可