vue 打包之后拿不到 原先 static 文件里的 图片

关于vue 打包是一个 困扰了很多初学者的问题，当然包括我。不过vue-cli 已经优化的很好

关于路径问题，百度上有很多，就是在

修改：
这个文件下的
  build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',   //  ==>  './'

确实能将打包以后的资源路径指向打包以后的文件夹。但是我使用 静态文件路径的 却拿不到

imgSrc: [
'/static/img/footer/tab11.png',
'/static/img/footer/tab21.png',
'/static/img/footer/tab31.png'
]

这种路径的一个算一个，都拿不到。

然后看打包以后的文件结构，发现只需要在路径变成相对路径

imgSrc: [
'./static/img/footer/tab11.png',
'./static/img/footer/tab21.png',
'./static/img/footer/tab31.png'
]

就能拿到。

但是当我修改标签上的 static（不要问我为什么要在标签上使用 static 文件里的东西，当时脑抽）

为

<img slot="icon" src="./static/img/footer/tab4.png">

结果报错了。。。打包也会报一堆错

然后想着既然这样，索性破罐子破摔，把这个改成 绑定的属性

<img slot="icon" :src="'./static/img/footer/tab4.png'">
就能拿到了。
Logo
Vue

前往低代码交流专区

更多推荐

cover

Mac 使用vscode 创建vue项目后修改文件提示：权限不足，以超级用户身份重试

avatar Vue
cover

基于nodejs+vue云计算的城乡医疗卫生服务系统[程序+论文+开题]-计算机毕业设计

avatar Vue
cover

ElasticSearch迁移至openGauss

avatar Vue