Closed eightfeet closed 7 years ago
我遇到了同样的问题
我的解决方法是在build的时候修改webpack配置文件的output.publicPath项
这一定不是最好的办法,希望可以帮到你
@KSOra Thanks
@KSOra 你是怎么修改的?
最后build生成的css图片url是根据publicPath和url-loader的配置生成的
比如
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'build.js'
}
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'url',
query: {
limit: 10000,
name: 'image/[name].[ext]?[hash]'
}
}
那么最后生成的url路径就是/dist/image/[name].[ext]?[hash]
,即publicPath
+ query.name
结合你工程的具体情况配置一下吧,如果方便的话建议还是不要随意修改publicPath,修改后hot-reload可能会出现问题==
@eightfeet 我以遇到了这个问题,搞了半天最后我无耻的 把loader 重写 替换了下路径. 我发布在npm 呢 https://www.npmjs.com/package/u-loader 使用 使用
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'u',
query: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
}, {
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'u',
query: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
}
如果是在js 中的话 最好的办法是通过require 引入 比如src=requre('assets/src/img/1.png');还有就是路径要写在webpack 中配置的路径哦。
// assetsPublicPath: '/', 把config/index.js 里的这一行注释下 试试
// assetsPublicPath: '/', 把config/index.js 里的这一行注释下 能用
Closing because it's not vue-cli
related issue. If this problem comes from one of official vuejs-templates, please open issue there.
我项目用到 sass,也有遇到这个的问题,后面改了样式文件的引入方式就解决了。
<style lang="scss" scoped src="./theme/styles/index.scss">
</style>
代码如下: https://github.com/zhaotoday/vue.js/blob/master/src/app/Articles/components/ChildComp/index.vue#L19
我这边是这么处理的:
build>webpack.base.conf.js里面
test: /.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000, 改成 limit: 102400,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
之后在.vue中写 background-image: url(../../assets/.png);
不要使用background:url(../../assets/.png) 就行了
可以正常显示图片
add this npm install html-loader { test: /.(html|tpl)$/, loader: 'html-loader' } in webpack.base.conf.js rules
我项目用到 sass,也有遇到这个的问题,后面改了样式文件的引入方式就解决了。
<style lang="scss" scoped src="./theme/styles/index.scss"> </style>
代码如下: https://github.com/zhaotoday/vue.js/blob/master/src/app/Articles/components/ChildComp/index.vue#L19
知道是什么原理吗??我基础不太好,试了好多种方法就这个可行....
用脚手架build prd时出现dist下css文件background-image找不到路径的情况,生成目录如下
|------dist |------|------static |------|------|-----css |------|------|------|------app.436040cbfa6aab8cd7ca62e837db8eea.css |------|------|------js |------|------|------img |------|------|------|------mix.a3cf3e7.png |------|------index.html
生成css如下
.mainbg{ background-image:url(/static/img/mix.a3cf3e7.png); }
导致url路径找不到 理想状态应该是这样才能找到 background-image:url(../img/mix.a3cf3e7.png); 怎么破
@eightfeet 你好,这个问题解决了吗?
background-image: url("~@/assets/app_images/leadspace.png");
assets
在 src
目录下
js中用 @
代表当前目录,css中使用 ~@
代表当前目录
用脚手架build prd时出现dist下css文件background-image找不到路径的情况,生成目录如下
生成css如下
导致url路径找不到 理想状态应该是这样才能找到 background-image:url(../img/mix.a3cf3e7.png); 怎么破