vue CLI 3.9.0版本打包时index主页空白及图片丢失的情况(精简有效)

vue CLI 3.9.0版本打包时index主页空白及图片丢失的情况

       看很多文章写的都是vue CLI2.x的操作方法,虽然部分也说3.x的了,但是里面的配置信息繁多,不知道要添加哪些,修改哪些。
       首选说vue CLI 3.x版本已经没有config文件夹了,配置信息是默认弄好的,如果要修改需要在根目录下(package.json同目录)新建一个vue.config.js,这个打包的时候会被自动执行,里面写上这些

module.exports = {
   publicPath:'./'
  };

       其实这些就ok了,只用改这个路径就行,其他的配置信息不用再向上加。(如果你还引入了jquery什么的,也再这上面写,解决打包的问题只用写这一个属性)
       如果你用的是 baseUrl ,则打包的时候会提示黄色字体,说该属性已经在3.3之后废弃,请使用publicPath(不过仍然可以打包成功),很建议大家看看vue cli的官方配置参考文档对这两个的解释,能够理解的更深:

https://cli.vuejs.org/zh/config/#vue-config-js

       还有就是打包之后可能会出现图片的丢失,我这里给出两个常见的解决方法:

  • 将 script 中的图片路径加上require,即require(./xxx./xxx.png) ,特别是data中的路径(Template中的src不用加)
  • 如果是直接引用的网上的图片路径,http:不要省略,路径写完整

猜你喜欢

转载自blog.csdn.net/weixin_42822484/article/details/98304022