vue 获取php图片报错,webpack,vue.js_webpack项目中添加了几张图片，import时报错，webpack,vue.js - phpStudy...

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文件代码：

import baseInfoImg from 'ASSETS/img/help/personBaseInfo.png'

import gitInfoImg from 'ASSETS/img/help/personGitInfo.png'

export default{

data(){

return{

baseInfo:baseInfoImg,

gitInfo:gitInfoImg

}

}

}

报错信息：

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

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

相关阅读:

iOS 多视频混合

Vue组件属性单向绑定问题 watch: 'value' (val) {something} 函数名带引号是什么意思？

学习讨论nodejs有哪些中文论坛？

java 如何继承泛型

5w条数据的批量更新的sql

使用vscode编辑.vue文件，style lange="less" 中很多语法会报错，有什么插件可以解决一下？

正则问题：限制文本框只能输入大于0的最长8位整数，两位小数的正则

写一个类似 jQuery 选择器，生成的 jQuery 实例对象 instanceOf jQuery，返回 false

phpstorm 中使用xdebug进行调试无法进入断点

react-redux遇到的一些问题？

为什么bootstrap要使用IE盒子模型呢？

在嵌入的script脚本中，怎样才能alert一个完整的?

ucenter可以同步ecshop与discuz同步登陆，现在问题是discuz用户在ecshop那边没有记录

javascript dom getElementsByName问题？

js单个反斜杠截取或者替换 ？

写一个

• 在
• 里的里面，为子元素，调试却显示在