vue打包静态资源后显示空白及static文件路径报错的解决

更新时间：2020年09月02日 14:11:46 作者：谭少居然

这篇文章主要介绍了vue打包静态资源后显示空白及static文件路径报错的解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

今天使用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文件路径报错的解决就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

vue清除动态路由的问题记录
项目中往往都是添加动态路由，如何删除已经添加进来的路由往往被忽视，为此这里做一下记录，感兴趣的朋友跟随小编一起看看吧
2023-10-10
Vue3项目打包后部署到服务器请求不到后台接口解决方法
在本篇文章里小编给大家整理了关于Vue3项目打包后部署到服务器请求不到后台接口解决方法，有需要的朋友们可以参考下。
2020-02-02
flv.js在vue中的使用方法
flv.js是一个用于在浏览器中解码和播放FLV视频的JavaScript库,它可以将FLV视频流解码并显示在HTML5的video元素中,从而实现在浏览器中直接播放FLV格式的视频文件,本文给大家介绍flv.js在vue中的使用,感兴趣的朋友一起看看吧
2023-11-11
Vue 路由过渡动效数据获取方法
这篇文章主要介绍了Vue 路由过渡动效数据获取方法，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
2018-07-07
element-plus结合sortablejs实现table行拖拽效果
使用element-plus的el-table组件创建出来的table,结合sortable.js实现table行拖动排序,文中有详细的代码示例供大家参考,具有一定的参考价值,感兴趣的同学可以自己动手试一试
2023-10-10
node+vue前后端分离实现登录时使用图片验证码功能
这篇文章主要介绍了node+vue前后端分离实现登录时使用图片验证码,记录前端使用验证码登录的过程，后端用的是node.js，关键模块是svg-captcha，结合实例代码给大家介绍的非常详细，需要的朋友可以参考下
2022-11-11
vue3 template转为render函数过程详解
在 Vue 中,template 模板是我们编写组件的主要方式之一,而 Vue 内部会将这些模板转换为 render 函数,render 函数是用于创建虚拟 DOM 的函数,通过它,Vue 能够高效地追踪 DOM 的变化并进行更新,下面我会通俗易懂地详细解释 Vue 如何将 template 转换为 render 函数
2024-10-10
前端Vue项目部署到服务器的全过程以及踩坑记录
使用Vue做前后端分离项目时,通常前端是单独部署,用户访问的也是前端项目地址,因此前端开发人员很有必要熟悉一下项目部署的流程,下面这篇文章主要给大家介绍了关于前端Vue项目部署到服务器的全过程以及踩坑记录的相关资料,需要的朋友可以参考下
2023-05-05
快速理解Vue路由导航守卫
这篇文章主要介绍了快速理解Vue路由导航守卫，“导航”表示路由正在发生变化，vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中：全局的, 单个路由独享的, 或者组件级的，下面来快速来接具体内容吧
2021-12-12
Vue + ElementUI表格内实现图片点击放大效果的两种实现方式
这篇文章主要介绍了Vue + ElementUI表格内实现图片点击放大效果的两种实现方式,第一种使用el-popover弹出框来实现而第二种使用v-viewer插件实现,需要的朋友可以参考下
2024-08-08

vue打包静态资源后显示空白及static文件路径报错的解决

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具