首页 > 其他分享 >vue run build打包之后服务器端访问图片404

vue run build打包之后服务器端访问图片404

时间:2022-12-02 18:56:46浏览次数:45  
标签:vue run 服务器端 url 404 build 打包 图片

记录:

assetsRoot: path.resolve(__dirname, BUILD_RESOURCES_DIST),//打包后文件存放的路径
assetsSubDirectory: "",//除了index.html之外的静态资源要存放的路径
assetsPublicPath: BUILD_ASSETS_PUBLIC_PATH,//代表打包后,index.html里面引用资源的相对地址

遇到问题是:vue项目build之后,小图片转成了base 64图片展示,大图片url是http://xxx/img...,没有跟上图片的url,导致404错误

解决方案是:webpack.base.conf.js中设置生产环境的目标图片url

{
    test: /\.(png|jpg|jpe?g|gif|svg)(\?.*)?$/,
    loader: 'url-loader',
    query: {
        limit: 6000,
        name: utils.assetsPath('img/[name].[ext]?v=[hash:8]'),
        publicPath:process.env.NODE_ENV==="production"?"/目标图片url/":"/" //资源更新外网后可开启走cdn
    }
}

同为kgbg项目开发记录

标签:vue,run,服务器端,url,404,build,打包,图片
From: https://www.cnblogs.com/yumeixin/p/15464407.html

相关文章

  • vue3 + vite 监听路由
    1.watch监听import{watch}from'vue'import{useRouter}from'vue-router'letrouter=useRouter()watch(()=>router.currentRoute._value,(m,n)=>{......
  • Vue.js_Vue Router 4.x 动态路由解决刷新空白
    问题描述:基于对VueRouter3.x没有改变前,我们常规的实现一定,在store中根据获取的用户权限,对路由进行过滤并返回,然后到路由守卫的地方,使用addRoutes动态添加路由。但......
  • vue文件分片上传,断点续传
    ​ 1 背景用户本地有一份txt或者csv文件,无论是从业务数据库导出、还是其他途径获取,当需要使用蚂蚁的大数据分析工具进行数据加工、挖掘和共创应用的时候,首先要将本地文......
  • VUE $refs 与 $el 详解
    $refs与$el是什么?作用是什么?ref,$refs,$el,三者之间的关系是什么?ref(给元素或者子组件注册引用信息)就像你要给元素设置样式,就需要先给元素设定一个class一样,同理......
  • vue多个方法的异步请求
    1、async和awaitasync/await是一种建立在Promise之上的编写异步或非阻塞代码的新方法。async是异步的意思,而await是asyncwait的简写,即异步等待。1//假设这是......
  • vue3自定义修饰符
    v-model 有一些内置的修饰符,例如 .trim,.number 和 .lazy都是对输入的数据做过滤处理vue也可以自定义实现创建一个自定义的修饰符 capitalize,它会自动将 v-model......
  • vue3 实现自定义 v-model
    在vue中,form表单输入可以通过v-model实现双向数据绑定,例如:<inputv-model="text"/>{{text}}在表单中输入时,页面展示的data-text也会相应改变如果是封装......
  • vue3 + element plus 使用字节跳动图标
    使用场景:提一下vue2用法>> 下面回到正题vue3用法1 安装包:npminstall@icon-park/vue-next--save2 字节跳动图标库取图地址>>  3 用法:<te......
  • vue中swiper轮播插件的一个错误
    在引入插件的时候无论如何也不生效,后来发现2.添加HTML内容。Swiper7的默认容器是'.swiper',Swiper6之前是'.swiper-container'。<divclass="swiper"><divclass="s......
  • Vue2(笔记11) - Vue核心 - 列表过滤(watch 和 computed实现)、列表排序
    列表过滤需求:输入关键词,过滤列表信息watch方法实现<divid="root"><h2>{{title}}</h2><inputtype="text"placeholder="请输入名字"v-model="keywords"><ul>......