Vue Cli Webpack 后台 url 路径问题
Posted
技术标签:
【中文标题】Vue Cli Webpack 后台 url 路径问题【英文标题】：Vue Cli Webpack background url path issue 【发布时间】：2017-01-31 14:33:31 【问题描述】：使用 vue cli。
由于某种原因，如果我直接在 scss 中引用它们并且不将它们动态绑定到我的 vue 对象，我的一些图像会出现相对路径问题。
假设我有一个带有名为 box 的 div 的 vue 模板。 Box 有一个这样的背景 url：
.box 背景：url('../img/box.jpg')
当我运行 npm run dev 时，它在本地运行得很好。 但是当我运行构建时，它不起作用。 404 错误。 我也试过这样做：
.box
background: url('~../img/box.jpg')
那没有用。
所以有这个：
webpack css-loader not finding images within url() reference in an external stylesheet
当我在 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 对象中的特定图像。
然后我必须将这些图像拖到根 dist 文件夹......而不是我想要做的是将它们保存在相对于 html 文件的 img 文件夹中（html 文件很简单）：
<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...或者我不能直接引用图像，如果我知道它不会被更改。
或者我的 sass 加载器/webpack 中是否有一些我缺少的设置。
这是我的 webpack 配置：
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()
])
【问题讨论】：
【参考方案1】：试试'~@/'的url前缀
background-image: url('~@/assets/box.jpg');
【讨论】：
解决了我的问题，谢谢！【参考方案2】：取决于您的根设置在哪里，您可以尝试background: url('~/assets/img/box.jpg') 或background: url('~/src/assets/img/box.jpg')，
其中一个应该可以工作
【讨论】：
【参考方案3】：我设法通过以下步骤复制了您的问题：
假设如下目录：
root/
dist/
src/
assets/
|--box.jpg
components/
|--home.vue
还有 home.vue：
<template>
<div class="foo">
</div>
</template>
<script>
export default
</script>
<style>
.foo
background: url('../assets/box.jpg')
</style>
在构建应用程序并将文件保存在 dist 文件夹中之后，如果我在 dist 文件夹中使用此命令提供构建的文件，则一切正常（为简单起见，我使用 lite-server）：
lite-server index.html
但是，如果我回到根文件夹并尝试做同样的事情：
lite-server dist/index.html
我会遇到和你一样的问题。
我通常如何解决这个问题是先导入图像，然后将其与内联样式一起使用：
<template>
<div v-bind:style= " 'background-image': 'url(' + box + ')' ">
Placeholder
</div>
</template>
<script>
// @ is an alias to /src
import box from '@/assets/box.jpg';
export default
data()
return box ;
</script>
还可以查看以下讨论：
Github: background image best practice Github: html image src require not respecting webpack aliases? Github: vue-loader not processing images in dynamic component Github: problem with background url ***: Vue.js data-bind style backgroundImage not working ***: webpack css-loader not finding images within url() reference in an external stylesheet【讨论】：
以上是关于Vue Cli Webpack 后台 url 路径问题的主要内容，如果未能解决你的问题，请参考以下文章