前言
本文说的这种图片路径错误是这样的,运行webpack-dev-server,一切正常,没有错误。当webpack之后,直接打开index页面,报错,图片找不到,找不到的原因是路径错误。
先看我的项目代码
webpack.config.js
var Webpack = require("webpack"); var path = require("path"); module.exports = { entry: './js/entry.js', output: { path: path.join(__dirname, '/build'), filename: 'bundle.js', publicPath: "/src/" }, module: { loaders: [{ test: /\.css$/, loader: 'style-loader!css-loader' }, { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192&name=images/[hash:8].[name].[ext]' }, { test: require.resolve('zepto'), loader: 'exports-loader?window.Zepto!script-loader' } ] }, watch: true, devtool: "cheap-module-eval-source-map" }
这里设置了publicPath,用法点击这里
index.html中引用路径如下:
<script type="text/javascript" src="src/bundle.js" ></script>
当运行webapck-dev-server时,http://localhost:8080/显示正常。
紧接着,要打包,目的是脱离命令能直接访问页面。
操作如下:
1.执行webpack
2.将build中的文件全部拷贝到src中
3.查看页面
因为图片路径错误,所以找不到图片。
我通过单独给处理图片的loader设置publicPath解决了这个问题,如下:
{ test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192&name=images/[hash:8].[name].[ext]', options:{ publicPath:'/' } }
然后测试,webapck-dev-server成功,wepback成功,打开页面访问,成功。
路径是这个样子的。
总结
以上就是这文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如有疑问大家可以留言交流,谢谢大家对小牛知识库的支持。
本文向大家介绍解决vue单页面应用打包后相对路径、绝对路径相关问题,包括了解决vue单页面应用打包后相对路径、绝对路径相关问题的使用技巧和注意事项,需要的朋友参考一下 在项目开发过程中,在部署过程中,用到了反向代理,这就要求前端代码中不能使用绝对路径。但是我们知道,一般情况下,通过webpack+vuecli默认打包后的HTML、css、js等文件,使用的都是绝对路径。下面可以举几个例子来看一下:
问题 配置 我这边是安装了@babel/runtime包和@babel/plugin-transform-runtime的 webpack配置如下 我运行npm run proxy时不会报错,但我运行npm run build打包后部署会报错
本文向大家介绍webpack打包多页面的方法,包括了webpack打包多页面的方法的使用技巧和注意事项,需要的朋友参考一下 前言 一开始接触webpack是因为使用Vue的关系,因为Vue的脚手架就是使用webpack构建的。刚开始的时候觉得webpack就是为了打包单页面而生的,后来想想,这么好的打包方案,只在单页面上使用是否太浪费资源了呢?如果能在传统多页面上使用webpack,开始效率是否会
本文向大家介绍Webpack打包慢问题的完美解决方法,包括了Webpack打包慢问题的完美解决方法的使用技巧和注意事项,需要的朋友参考一下 前言 这几天写腾讯实习生 Mini 项目的时候用上了 React 全家桶,当然同时引入了 Webpack 作为打包工具。但是开发过程中遇到一个很棘手的问题就是,React 加上 React-Router、superagent、eventproxy 这些第三方轮
本文向大家介绍vue-cli webpack模板项目搭建及打包时路径问题的解决方法,包括了vue-cli webpack模板项目搭建及打包时路径问题的解决方法的使用技巧和注意事项,需要的朋友参考一下 这里建议刚学vue的同学第一个小案例不要使用vue-cli进行操作,待对基本的api使用的比较顺手了之后再进行vue-cli的体验比较好。本人是一名后端开发人员,接触前端时间不长,这里有说的不好的地方
在开发我的 electron 和 vue 是同一文件目录,通过运行 npm run electron:dev 和 npm run serve 使应用可以显示正常,相当于 electron 内嵌了一个 vue 但是打包 npm run electron:build 后的 exe 页面指向了默认的 ./electron/index.html ,并没有将我 vue 开发的页面展示出来 有点想不明白这个打