共计 731 个字符,预计需要花费 2 分钟才能阅读完成。
问题 :项目本来是很简单,看网上说把前面路径下的 public 路径去掉,好,开发环境没问题了,可打包报错。由于在 vue-cli4.4 时候,在本地的项目中 public 中加入了一个 images 文件,结果项目的打包 dist 在服务器中就是找不到 img 路径,结果花费了老大很长的时间才解决。
tip 这边默认的路径是相对路径,但是服务器的是找不到的,刚开始是在本地 /images/… 没有问题,服务器的话就不行了,由于服务器需要一个 h5 的文件夹来接受本地的文件,所以配置如下:
先参考一个热心大咖,vue@cli3 项目模板怎么使用 public 目录下的静态文件
vue.config.js 文件配置
module.exports = {publicPath: '/h5/'}
需要使用的页面进行配置
<template>
<div>
<div class="imgs" v-for="(v,i) in imagesurl" :key="i">
<img :src="`${publicPath}${v}`" alt />
</div>
</div>
</template>
<script>
export default {
// props: {
// imageurldata: Array
// },
props: ["imageurldata"],
data() {
return {
imagesurl: this.imageurldata,
publicPath: process.env.BASE_URL
};
},
mounted() {},
methods: {}};
</script>
<style scoped lang="scss">
.imgs {
font-size: 0;
img {
width: 100%;
height: auto;
}
}
</style>
问题解决,图片出来了
正文完