当我使用 img 标记添加图片时,它会转换我的图像路径,如" /static/img/image.334889b.jpg"。
但是当我通过使用视频标签播放我的视频时也这样做
<video loop muted autoplay>
<source src="../assets/video.mp4" type="video/mp4">
</video>
它没有正确转换路径。浏览器控制台显示其路径为&#34; http://localhost:8080/assets/video.mp4&#34;。我尝试通过Google搜索解决方案,但我发现了https://github.com/vuejs-templates/webpack/issues/277,但仍然没有运气。
这是我的webpack.base.config.js
var path = require('path')
var config = require('../config')
var utils = require('./utils')
var projectRoot = path.resolve(__dirname, '../')
var env = process.env.NODE_ENV
var cssSourceMapDev = (env === 'development' && config.dev.cssSourceMap)
var cssSourceMapProd = (env === 'production' && config.build.productionSourceMap)
var useCssSourceMap = cssSourceMapDev || cssSourceMapProd
var vueloaders = utils.cssLoaders().html = 'html?attrs[]=img:src&attrs[]=video:src&attrs[]=source:src'
module.exports = {
entry: {
app: './src/main.js'
},
output: {
path: config.build.assetsRoot,
publicPath: process.env.NODE_ENV === 'production' ? config.build.assetsPublicPath : config.dev.assetsPublicPath,
filename: '[name].js'
},
resolve: {
extensions: ['', '.js', '.vue'],
fallback: [path.join(__dirname, '../node_modules')],
alias: {
'vue$': 'vue/dist/vue',
'src': path.resolve(__dirname, '../src'),
'assets': path.resolve(__dirname, '../src/assets'),
'components': path.resolve(__dirname, '../src/components')
}
},
resolveLoader: {
fallback: [path.join(__dirname, '../node_modules')]
},
module: {
loaders: [
{
test: /\.vue$/,
loader: 'vue'
},
{
test: /\.js$/,
loader: 'babel',
include: projectRoot,
exclude: /node_modules/
},
{
test: /\.json$/,
loader: 'json'
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url',
query: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
{
test: /\.mp4$/,
loader: 'file',
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url',
query: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
}
]
},
vue: {
loaders: vueloaders,
postcss: [
require('autoprefixer')({
browsers: ['last 2 versions']
})
]
}
}