DDR爱好者之家

vue打包静态资源后显示空白及static文件路径报错的解决
站长资源 2024/12/25 佚名
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收录资讯

更新日志

友情链接

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