DDR爱好者之家

vue打包静态资源后显示空白及static文件路径报错的解决
站长资源 2024/11/24 佚名
74 1538
DDR爱好者之家 Design By 杰米

今天使用vue打包（npm run build）遇到了几个坑，在这里分享给大家

打包之后打开dist的页面显示空白：

这个问题以前就处理过，是打包过程中出现错误频率较高的一种，可能有3处地方会出现这种情况

1、记得改一下config下面的index.js中bulid模块导出的路径。因为打包后的index.html里边的内容都是通过script标签引入的，默认显示的路径不对，打开肯定是空白的。

build: {
  index: path.resolve(__dirname, '../dist/index.html'),
  assetsRoot: path.resolve(__dirname, '../dist'),
  assetsSubDirectory: 'static',
  assetsPublicPath: '/',
  productionSourceMap: true,
  devtool: '#source-map',
  productionGzip: false,
  productionGzipExtensions: ['js', 'css'],
  bundleAnalyzerReport: process.env.npm_config_report
 }

这里需要将 assetsPublicPath: '/'改为assetsPublicPath: './',

2.src里边router/index.js路由配置里边默认模式是mode:'hash'（页面会在路由上加#），有时候改成了history（纯净路由）模式的话，打开也会是一片空白。所以改为hash或者直接把模式配置删除，让它默认的就行 。

export default new Router({
//mode: 'history',
mode:'hash',\\或者直接不写
 routes: [{}]
)}

3.也有可能是因为背景图片路径没有配置需要在build/utils.js添加配置publicPath: '../../'

if (options.extract) {
   return ExtractTextPlugin.extract({
    use: loaders,
    publicPath:'../../',
    fallback: 'vue-style-loader'
   })
  } else {
   return ['vue-style-loader'].concat(loaders)
  }

打包后找不到响应路径：

这都是比较常见的几种解决方式，如果将静态资源的图片路径作为绑定数据以js引入，图片放入了static里面用来引入这个页面又该怎样处理呢,如果以绝对路径访问vue打包是不会处理这一类的，所以打包后它图片访问的路径不会更改，而打包后dist文件里就只有index.html和webpack不会处理的static文件夹（vue static/下的文件都不会被Webpack处理：它们使用相同的文件名，直接拷贝到最终的路径）

解决方式有两种，

1.如果要上线的话，需要将你的主域名加在static之前然后他会逐级去访问打包后的文件。

return {
 isShow:true,
 imgData:'',
 myUpPic:'/yourDN/static/img/logo.png'
}

2.由于vue将组件访问静态资源的路径配置好了，你可以直接/static来找到static下的文件，但是这里的问题就是你访问的时候它是逐级访问这些文件的，所以打包后他还是会找不到静态资源的文件，在这里你就需要将/static改成./static，这样的话他就会在打包后的文件夹下直接访问其之下的静态资源文件夹。

return {
 isShow:true,
 imgData:'',
  //myUpPic:'/static/img/logo.png' 
 myUpPic:'./static/img/logo.png'
}

以上就是个人处理vue打包bug的一些小经验，希望这些能够对大家有所帮助。

补充知识：vue打包后路径多了个/css/static

vue打包后路径多了个/css/static导致一些css属性效果不显示。

解决方法：

在build/utils.js文件中添加publicPath:'…/…/',重新打包即可。

if (options.extract) {
   return ExtractTextPlugin.extract({
    use: loaders,
    fallback: "vue-style-loader",
    publicPath: "../../"
   });
  } else {
   return ["vue-style-loader"].concat(loaders);
  }

以上这篇vue打包静态资源后显示空白及static文件路径报错的解决就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米