Sử dụng lệnh clue vue.Vấn đề đường dẫn url nền Vue Cli Webpack
Vì một số lý do, MỘT SỐ hình ảnh của tôi, nếu tôi đề cập đến chúng trực tiếp trong scss và không liên kết chúng động với đối tượng vue của tôi có vấn đề với đường dẫn tương đối.
Giả sử tôi có mẫu vue với hộp div được gọi là. Box có một url nền này:
.box { background: url ('../ img/box.jpg')
đó làm việc tại địa phương chỉ tốt khi tôi chạy NPM chạy dev. Nhưng khi tôi chạy xây dựng, nó không hoạt động. Lỗi 404. Tôi cũng đã cố gắng làm điều này:
.box{
background: url('~../img/box.jpg')
Và điều đó không làm việc.
Vì vậy, có này:
webpack css-loader not finding images within url() reference in an external stylesheet
Và khi tôi thay đổi này trong webpack.config:
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'build.js'
},
Để:
output: {
path: path.resolve(__dirname, './dist'),
publicPath: './dist/',
filename: 'build.js'
},
Nó sẽ tạo Chunk Hình ảnh trong webpack của tôi xây dựng với băm để lưu vào bộ đệm ẩn. Và chỉ cho những hình ảnh cụ thể mà không bị ràng buộc trong đối tượng vue.
Và sau đó tôi phải kéo những hình ảnh đó vào thư mục gốc của thư mục .... thay vì những gì tôi muốn làm, giữ chúng trong thư mục img liên quan đến tệp html (tệp html đơn giản):
<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>
Câu hỏi là, tôi có phải ràng buộc từng im lặng đơn lẻ từ dữ liệu ... hoặc không thể chỉ trực tiếp tham chiếu đến hình ảnh nếu tôi biết nó sẽ không bị thay đổi.
Hoặc có một số cài đặt trong bộ nạp/webpack của tôi mà tôi đang thiếu.
Dưới đây là cấu hình của tôi 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()
])
}