Vue Cli Webpack 后台url路径问题 [英] Vue Cli Webpack background url path issue
问题描述
使用 vue cli.
Using vue cli.
出于某种原因，我的某些图像，如果我直接在 scss 中引用它们并且不将它们动态绑定到我的 vue 对象，则会出现相对路径问题.
For some reason, SOME of my images, if I refer to them directly in the scss and don't bind them dynamically to my vue object have issues with relative paths.
假设我有一个带有名为 box 的 div 的 vue 模板.Box 有一个这样的背景网址:
Say I have a vue template with a div called box. Box has a background url of this:
.box{背景:url('../img/box.jpg')
.box{ background: url('../img/box.jpg')
当我运行 npm run dev 时，这在本地工作得很好.但是当我运行构建时，它不起作用.404错误.我也试过这样做:
That works locally just fine when I run npm run dev. But when I run build, it doesn't work. 404 error. I have also tried doing this:
.box{
background: url('~../img/box.jpg')
那没有用.
就是这样:
webpack css-加载程序在外部样式表中的 url() 引用中找不到图像
当我在 webpack.config 中更改它时:
And when I change this in webpack.config:
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'build.js'
},
致:
output: {
path: path.resolve(__dirname, './dist'),
publicPath: './dist/',
filename: 'build.js'
},
它将在我的 webpack 构建中创建块图像，并带有用于缓存的哈希值.并且只针对那些没有绑定在 vue 对象中的特定图片.
It'll create Chunk Images in my webpack build with hashes for cacheing. And just for those specific images that aren't bound in the vue object.
然后我必须将这些图像拖到根目录 dist 文件夹....而不是我想要做的是将它们保存在相对于 html 文件的 img 文件夹中(html 文件只是):
And then I have to drag those images over to the root dist folder....rather than what I want to do which is keep them in an img folder relative to the html file ( html file is simply ):
<html lang="en">
<head>
<meta charset="utf-8">
<title>vue</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<app></app>
<script src="dist/build.js"></script>
</body>
</html>
问题是，我是否必须绑定数据中的每一个 vue img...或者如果我知道它不会被更改，我不能直接引用图像.
Question is, do I have to bind every single vue img from the data...or can't I just directly refer to a image if I know it's not going to be changed.
或者我的 sass loader/webpack 中是否有一些我遗漏的设置.
Or is there some setting in my sass loader/webpack that i'm missing.
这是我的 webpack 配置:
Here's my webpack config:
var path = require('path')
var webpack = require('webpack')
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: './dist/',
filename: 'build.js'
},
resolveLoader: {
root: path.join(__dirname, 'node_modules'),
},
vue: {
html: {
root: path.resolve(__dirname, './dist')
}
},
module: {
loaders: [
{
test: /\.vue$/,
loader: 'vue'
},
{
test: /\.js$/,
loader: 'babel',
exclude: /node_modules/
},
{
test: /\.json$/,
loader: 'json'
},
{
test: /\.html$/,
loader: 'vue-html'
},
{
test: /\.scss$/,
loaders: ["style", "css", "sass"]
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'url',
query: {
limit: 10000,
name: '[name].[ext]?[hash]'
}
}
]
},
devServer: {
historyApiFallback: true,
noInfo: true
},
devtool: '#eval-source-map'
}
if (process.env.NODE_ENV === 'production') {
module.exports.devtool = '#source-map'
// http://vue-loader.vuejs.org/en/workflow/production.html
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
}),
new webpack.optimize.OccurenceOrderPlugin()
])
}
推荐答案
取决于你的root设置在哪里，你可以试试background: url('~/assets/img/box.jpg')或 background: url('~/src/assets/img/box.jpg'),
其中之一应该可以工作
depends on where your root set, you could try background: url('~/assets/img/box.jpg') or background: url('~/src/assets/img/box.jpg'),
one of them should work
这篇关于Vue Cli Webpack 后台url路径问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
