vue.js - webpack项目中添加了几张图片，import时报错

问题描述

问 题

webpack.conf.js配置代码：

var path = require('path'),
  webpack = require('webpack'),
  ExtractTextPlugin = require('extract-text-webpack-plugin');

var rootPath = path.resolve(__dirname, '..'), // 项目根目录
  src = path.join(rootPath, 'src'); // 开发源码目录
var commonPath = {
  rootPath: rootPath,
  dist: path.join(rootPath, 'dist'), // build 后输出目录
  indexHTML: path.join(src, 'index.html'), // 入口基页
  staticDir: path.join(rootPath, 'static') // 无需处理的静态资源目录
};

module.exports = {
  commonPath: commonPath,
  entry: {
    app: path.join(src, 'app.js'),
    vendor: [
      'vue',
      'vue-router'
    ]
  },
  output: {
    path: path.join(commonPath.dist, 'static'),
    publicPath: '/static/'
  },
  resolve: {
    extensions: ['', '.js', '.vue'],
    alias: {
      COMPONENT: path.join(src, 'components'),
      SERVICE: path.join(src, 'services'),
      VIEW: path.join(src, 'views'),
      ASSETS: path.join(src, 'assets'),
      UTILS: path.join(src, 'utils'),
      VALIDATOR: path.join(src, 'utils/validator')
    }
  },
  resolveLoader: {
    root: path.join(rootPath, 'node_modules')
  },
  module: {
    loaders: [{
      test: /\.vue$/,
      loader: 'vue',
      include: src,
      exclude: /node_modules/
    }, {
      test: /\.js$/,
      loader: 'babel!eslint',
      include: src,
      exclude: /node_modules/
    }, {
      test: /\.json$/,
      loader: 'json'
    }, {
      test: /\.html$/,
      loader: 'html'
    }, {
      test: /\.(png|jpe?g|gif|svg)$/,
      loader: 'url',
      query: {
        limit: 10240, // 10KB 以下使用 base64
        name: 'img/[name]-[hash:6].[ext]'
      }
    }, {
      test: /\.(woff2?|eot|ttf|otf)$/,
      loader: 'fonts/url-loader?limit=10240&name=[name]-[hash:6].[ext]'
    }]
  },
  vue: {
    loaders: {
      js: 'babel!eslint',
      css: ExtractTextPlugin.extract('vue-style', 'css'),
      less: ExtractTextPlugin.extract('vue-style', 'css!less'),
      sass: ExtractTextPlugin.extract('vue-style', 'css!sass')
    }
  },
  eslint: {
    formatter: require('eslint-friendly-formatter')
  },
  plugins: [
    new webpack.DefinePlugin({
      // 配置开发全局常量
      __DEV__: process.env.NODE_ENV.trim() === 'development',
      __PROD__: process.env.NODE_ENV.trim() === 'production'
    })
  ]
};

Person.vue文件代码：

<template>
  <div>
    <img :src="baseInfo" alt="">
    <img :src="gitInfo" alt="">
  </div>
</template>
<script>
  import baseInfoImg from 'ASSETS/img/help/personBaseInfo.png'
  import gitInfoImg from 'ASSETS/img/help/personGitInfo.png'
  export default{
    data(){
      return{
        baseInfo:baseInfoImg,
        gitInfo:gitInfoImg
      }
    }
  }
</script>

报错信息：

ERROR in ./~/babel-loader/lib!./~/eslint-loader!./~/vue-loader/lib/selector.js?type=script&index=0!./src/components/Help/Person.vue
Module not found: Error: Cannot resolve 'file' or 'directory' E:\project\paas\Talc\src\assets/img/help/personBaseInfo.png in E:\project\paas\Talc\src\components\Help
 @ ./~/babel-loader/lib!./~/eslint-loader!./~/vue-loader/lib/selector.js?type=script&index=0!./src/components/Help/Person.vue 7:22-67

重点是：

E:\project\paas\Talc\src\assets/img/help/personBaseInfo.png

后面怎么变成正斜杠了。。。

解决方案

嗯？你是不是确定这地址是对的呢：E:projectpaasTalcsrcassets/img/help/personBaseInfo.png

这篇关于vue.js - webpack项目中添加了几张图片，import时报错的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！