1

当我使用img标签包含我的图像时，它会将我的图像路径转换为“/static/img/image.334889b.jpg”。

但是当我通过使用视频标签来播放我的视频时

<video loop muted autoplay>
    <source src="../assets/video.mp4" type="video/mp4">
</video>

它没有正确转换路径。浏览器控制台显示其路径为“ http://localhost:8080/assets/video.mp4 ”。我尝试通过谷歌搜索解决方案，我发现了这个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']
       })
    ]
   }
}
4

0 回答 0