vue-cli脚手架npm run build打包后图片路径问题 2018.11.21

2018/11/21

最近在自己尝试做一个vue的项目，发现了一个打包以后出现的路径问题

　　使用npm run dev 可以正常打开项目，图片路径不会出错，使用脚手架npm run build 打包以后打开index.html 发现所有图片加载不出来，

发现路径前面都多了一个斜杠 / (打包以后在服务器运行时没有问题的)，但是现在想打包以后在本地看怎么办呢？

这个时候只需要修改一下 webpack.config.js 文件里面的配置，然后重新打包就ok了，具体如图

删除红圈语句的 publicPath: '/dist/', 前面的 / 就可以了（修改打包以后图片以及其它文档相对于index.html的相对路径），

服务器上默认会去寻找静态资源所以一般不会出错，而本地的路径就需要准确

转载于:https://www.cnblogs.com/SONLY-s/p/9993251.html

vue-cli脚手架npm run build打包后图片路径问题 2018.11.21相关推荐

解决：vue项目npm run build 打包后 :src路径里面的本地图片找不到。
问题描述及错误代码: // 本地运行.打包图片是ok的 <img src="../../static/images/orderSeeProgress0.png"> / ...
vue项目使用 npm run build 打包后出现样式错乱问题解决方法
检查组件内的标签是不是没有加scoped 不加scoped打包后容易引起样式错乱正确规范应该这样 scoped 作用style样式只在本组件内有效,防止别组件类名或标签一样样式冲突.
vue项目执行npm run build 打包出现某些图片，字体，资源文件路径404，无法加载的问题
如图所示: 如果出现如图的错误.首先我们第一步是考虑进入dist文件夹里面的static文件夹正常情况下static文件夹是非常干净的如果你发现你的static文件夹出现了多余的img.fonts ...
vue2.0项目部署到服务器_vue项目运行npm run build打包后如何发布到服务器？
运行npm run build后,怎么发布到服务器? 这样就打包成功了.然后我的项目根目录就会多一个dist文件夹,里面包含static文件夹(存放img.css.js等文件)和index.html. ...
npm run build 打包后，如何运行在本地查看效果
目前,使用vue-cli脚手架写了一个前端项目,之前一直是使用npm run dev 在8080端口上进行本地调试.项目已经进行一半了,今天有时间突然想使用npm run build进行上线打包,试试 ...
npm run build 打包后页面无法显示问题
今早运维小哥哥跑来找我,想给我的新项目发个版,我还是按照一般流程npm run build 然后git提交,打个tag v1.0.1,运维小哥哥说你前端页面没写好嘛? emmmm-.老娘早就写好了.肯 ...
npm run build 打包报错primordials is not defined的解决方法
npm run build 打包报错primordials is not defined的解决方法 D:\uniapp项目\huishua_web_agent>npm run build> ...
npm run build 打包爬坑记（1）
npm run build 打包爬坑记先说说打包过程,npm run build 后放入phpstudy里面,访问本地ip,查看phpstudy的端口号,就能访问页面了(访问地址:http://19 ...
yarn build 和 npm run build打包有什么区别
yarn build 和 npm run build打包有什么区别结论: 没区别,yarn build === yarn run build === npm run build

vue-cli脚手架npm run build打包后图片路径问题 2018.11.21

vue-cli脚手架npm run build打包后图片路径问题 2018.11.21相关推荐

最新文章

热门文章