个人中心
文章发布
退出
作者热门文章
- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用？
- database - RESTful URI 是否应该公开数据库主键？
24
4
使用 vue 客户端。
出于某种原因，如果我直接在 scss 中引用它们并且不将它们动态绑定(bind)到我的 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 构建中使用用于缓存的哈希创建 block 图像。并且只针对那些未绑定(bind)在 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>
问题是，我是否必须从数据中绑定(bind)每一个 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()
])
}
最佳答案
试试'~@/'的url前缀
background-image: url('~@/assets/box.jpg');
关于sass - Vue Cli Webpack 后台 url 路径问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39648785/
24
4
0
BufferedImage image = ImageIO.read(SpriteSheet.class.getResource(path)); BufferedImage image = Image
希望有人能够帮助我解决将我的 React 应用程序推送到 Heroku 时遇到的问题。 heroku 日志反复显示以下错误。 at=error code=H10 desc="App crashed"
我是 Kotlin 的新手，我正在经历这样的例子。 . . package com.example.lambda1 import spark.Spark.get fun main(args: Arra
如果您已经安装了 32 位 JDK，请在中定义一个 JAVA_HOME 变量 Computer>System Properties>System Setting>Enviorment VAriable
我正在开发一个独立于平台的应用程序。我收到一个文件 URL*。在 Windows 上，这些是: file:///Z:/folder%20to%20file/file.txt file://host/f
我在 OSX、Objective-C 上。 我有一个像 这样的路径/NSURL /Users/xxx/Desktop/image2.png 但我将它传递给第三方应用程序，该应用程序会像 excpect
我已经安装了 Android studio 和插件的 DART，FLUTTER 来启动 flutter，但是因为我在创建我的第一个 flutter 项目时无法提供 sdk 路径。 最佳答案 我试图找出
127.0.0.1:8000/api/仅包含来自第二个应用程序的 url，但我将两个 url 模块链接到相同的模式。甚至有可能做到这一点吗？ 第一个应用程序: from django.urls imp
对于大量图像(大约 1k，加上相同数量的拇指，在大约 500 个文件夹中)，我们要求网站上使用的所有图像 URI 都必须具有 SEO 优化路径。它们已经准备好并提供完整的路径结构(每个文件夹包含一个具
为什么 f 不是一个文件？什么可能导致这种情况？ String currentPhotoPath = "file:/storage/sdcard0/Pictures/someFileName.
Gradle 中的项目名称或路径中允许使用哪些字符？ 它是否与特定操作系统的目录名称中允许的字符相同(例如: http://en.wikipedia.org/wiki/Filename#Reserve
我有一个包含文件夹路径的表格。我需要找到层次结构中这些文件夹之间的所有“差距”。我的意思是，如果表格包含这 3 个文件夹: 'A' 'A\B\C' 'A\B\C\D\E\F\G' 我需要在层次结构中找
我在 Linux 服务器上的/home/subversion 中安装了 svn - 那里有一个 ROOT 文件夹，其中包含 db 和 conf 等文件夹。没有映射到项目名称的文件夹，请有人告诉我如何列
对于我的图像位置:/src/assets/bitmap/sample.jpg 给出了关键配置: context: resolve('src') output: { path: resolve('b
我需要创建带有圆角的 SVG 路径，以将它们导出到 DXF 进行切割。我的问题是角应该是圆弧，而不是贝塞尔曲线。 使用 arc 命令相对容易处理直角，因为半径也是从拐角到圆弧起点的距离。对于其他角度，
大家好，我正在玩 Airflow，我正在阅读这篇很有帮助的 tutorial .我正在寻求帮助以更好地了解 Admin->Connection 如何在 Conn Type: File (path) 方
我的目标是定义R将用于安装和搜索库的单个路径。我read可以通过更改Rprofile.site安装路径中的R文件来完成。我在那里尝试了两个命令: .libPaths("D:/RLibrary") .L
我有一个问题:当我在一个页面中时，我想返回到上一页。我使用 $routeProvider。如何读取之前的 url？ 我尝试在我的 Controller 中使用此代码但不起作用... angular.m
我正在尝试将一个文件从我的主干合并到一个分支(wc)，并且对于看起来位于当前合并操作中不涉及的分支上的路径出现奇怪的未找到路径错误。 例如，在我们的 svn 项目中，我们有: 分行 分支 0 分支 1
我有一个树数据序列化如下: 关系:P到C是“一对多”，C到P是“一对一”。所以列 P 可能有重复的值，但列 C 有唯一的值。 P, C 1, 2 1, 3 3, 4 2, 5 4, 6 # in da
我是一名优秀的程序员,十分优秀！