vue-cli打包以后背景图路径错误

Question

开发的时候没注意assets和static 把图片都放在static了，现在打包以后项目不能放在根目录里，发现css里的背景路径都有问题。

查了网上按照下面的图更改了还是不行，仍然找不到图片路径 还是static 并不会 加上根目录 求解诶

实在百度不到应该在哪儿配了

Answer 1

看到你描述的问题大致了解了。
css或者less 文件 引入文件你可以把图片放在 css 同级目录。
从开发的维护的角度来说文件就近依赖例如:

xx.vue
xx.less
img
    xx.png

你在 xx.less 里面引用图片路径 可以写成 "./img/xx.png"
这样做有几个好处：
1.替换修改图片位置清晰，维护方便；
2.图片修改后 webpack 会自动修改图片文件名。
剩下的事交给 webpack 它会把图片都复制到 dist 目录。

Answer 2

另外的一个规避方法，将大于10k的图片使用img标签引入，小于10k的无所谓什么方式
具体配置的是在webpack中：

 { // 图片的编译规则
    test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
    loader: 'url-loader',
    query: {
        limit: 10000, // 文件大小小于10k，使用base64打包
        name: utils.assetsPath('img/[name].[hash:7].[ext]')
    }
},

同样的，也可以更改图片的限制大小，但不建议这样做

Answer 3

我说下window环境下的吧
假设你的vue-pro在

D://mypro/vue/mytest/pro1/

那你的你编译出来的dist目录下的静态文件是把整个d://作为根目录的
在D://mypro/vue/mytest/pro1/config/index.js 里将

assetsPublicPath: '/mypro/vue/mytest/pro1/dist/',

配置上去就行了.还有一点确保你的 css loader有安装