pwh*_*itt 9 sass webpack vue.js
使用vue cli.
出于某种原因,我的一些图像,如果我直接在scss中引用它们并且不将它们动态地绑定到我的vue对象,则会出现相对路径问题.
假设我有一个带有div的vue模板.Box有一个背景网址:
.box {background:url('../ img/box.jpg')
当我运行npm run dev时,本地工作就好了.但是当我运行构建时,它不起作用.404错误.我也试过这样做:
.box{
background: url('~../img/box.jpg')
那没用.
所以这就是:
webpack css-loader无法在外部样式表中的url()引用中查找图像
当我在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构建中创建Chunk Images,其中包含用于缓存的哈希.并且仅适用于未在vue对象中绑定的特定图像.
然后我必须将这些图像拖到root 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 loader/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()
])
}
小智 5
尝试使用 '~@/' 的 url 前缀
background-image: url('~@/assets/box.jpg');
我设法通过以下步骤复制您的问题：
假设有以下目录：
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>
另请查看以下讨论：
| 归档时间： |
|
| 查看次数： |
3853 次 |
| 最近记录： |