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

赞 (0)

相关推荐

  • vue cli 3.0通用打包配置代码,不分一二级目录

    1.项目根目录下新建vue.config.js,进行如下配置即可 module.exports={ publicPath:'', }; 补充知识:Vue-CLI3.0更改打包配置 在实际项目开发中,我们一般会直接使用vue.vue-cli来搭建项目.vue框架的宗旨就是让初学者轻松上手,所以,对于打包配置的一些东西,vue的脚手架已经帮我们做好了完美的封装,让我们达到安装既用的效果,也不用担心太多不会做打包配置的问题. 在前期使用Vue-CLI2.0搭建项目时,我们可以在build目录下,直接修

  • vue cli3.0打包上线静态资源找不到路径的解决操作

    项目中遇到打包之后静态资源路径找不到,报如下错误: 解决方法是: 在项目的根目录下创建vue.config,js文件,在里面配置静态资源的路径,publicPath是配置静态资源路径的属性,vue.config,js文件的代码如下: module.exports = { publicPath: './' } 补充知识:vue-cli3 npm run build 打包后静态资源的配置 vue.config.js的配置 vue.config.js配置如下: const path = require

  • 解决vue-cli webpack打包后加载资源的路径问题

    vue项目,访问打包后的项目,输入路径后,页面加载空白.这时会有两类问题,都是路径问题. 1.一个是css,js,ico等文件加载不到,是目录里少了dist 打开页面时一片空白 解决办法: config/index.js文件的build->assetsPublicPath的默认值改为 './' assetsPublicPath:资源的根目录.这个是通过http服务器运行的url路径.因为webapp和static中间还有层dist,所以要用'./' 2.另一个就是单纯的在背景图使用相对路径导致加

  • 解决vue单页面应用打包后相对路径、绝对路径相关问题

    在项目开发过程中,在部署过程中,用到了反向代理,这就要求前端代码中不能使用绝对路径.但是我们知道,一般情况下,通过webpack+vuecli默认打包后的HTML.css.js等文件,使用的都是绝对路径.下面可以举几个例子来看一下: 1.打包后的index.html文件 2.打包后的css文件 所以,如果在项目中需要使用相对路径来获取静态的资源文件,需要怎么做呢? 1.修改webpack配置文件中的assetsPublicPath,修改为如下图所示. 修改配置后,进行打包发现,打包后的index

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

    今天使用vue打包(npm run build)遇到了几个坑,在这里分享给大家 打包之后打开dist的页面显示空白: 这个问题以前就处理过,是打包过程中出现错误频率较高的一种,可能有3处地方会出现这种情况 1.记得改一下config下面的index.js中bulid模块导出的路径.因为打包后的index.html里边的内容都是通过script标签引入的,默认显示的路径不对,打开肯定是空白的. build: { index: path.resolve(__dirname, '../dist/ind

  • vue-cli 项目打包完成后运行文件路径报错问题

    本文介绍了vue-cli 项目打包完成后运行文件路径报错问题,做个笔记,也分享给大家. 刚新建的vue-cli项目,同事说要打包一版进行测试,打包完成后放在tomcat上发现路径报错问题. 百度了一下,怀疑是build里面没有定义路径问题,度友提供了解决方案: 找到config文件夹下的index.js文件,修改路径代码 找到build对象,修改属性assetsPublicPath为 './' 但是由于vue-cli项目中已经没有config文件夹,需要在根目录下创建vue.config.js

  • 删除EM，强制结束EM进程后，启动数据库ORA-00119，ORA-00132报错的解决方法

    通过emca -deconfig dbcontrol db -repos drop命令删除EM资料库时,很长时间没有删除完成,期间数据库连接数暴涨,达到数据库最大连接数,结果前台及后台均连接不上数据库.强制杀死EM及应用相关进程,关闭数据库后,重启数据库时报:ORA-00119,ORA-00132错误. SQL> startup; ORA-00119: invalid specification for system parameter LOCAL_LISTENER ORA-00132: syn

  • vue项目打包为APP,静态资源正常显示,但API请求不到数据的操作

    Vue项目通过Hbuild打包为APP后,静态文件正常显示,但并没有像开发时那样请求到数据. 这是为什么?因为APP并没有跨域,不存在跨域一说. 我们在开发的时候,js在不同的域之间进行数据传输或通信,所以会给项目设置代理来跨域 config下的index.js 比如这个 proxyTable: { '/api':{ target: 'http://XXX/xxx/v3', changeOrigin: true, pathRewrite: { '^/api': '' } } } 在开发时这样做是

  • vue项目之webpack打包静态资源路径不准确的问题

    vue项目之webpack打包静态资源路径不准确的问题

    目录 webpack打包静态资源路径不准确 问题 静态资源找不到如js文件 图片找不到 webpack中的静态资源处理 Webpacked 资源 资源处理规则 在JavaScript里获取资源路径 "真实的" 静态资源 webpack打包静态资源路径不准确 问题 1.将打包好的项目部署到服务器,发现报错说图片找不到. 2.静态资源如js访问不到 分析并且解决问题 明确一点的就是,看到报错404,找不到静态资源,很明显,路径错误了. 静态资源找不到如js文件 资源打包路径有误,打包后的资

  • Go1.16新特性embed打包静态资源文件实现

    目录 背景 embed 嵌入 字符串.字节切片.文件嵌入 嵌入文件 嵌入文件夹 嵌入匹配 FS 文件系统 总结: 背景 相信有一部分人喜爱 GO 的初衷大概是:跨平台静态编译,如果在没用通过 CGO 引用其他库的话,一般编译出来的可执行二进制文件部署起来非常方便,但人们在实际中发现,使用 Go 语言开发的后端 WEB 程序存在 HTML 模版.图片.JS.CSS.JSON 等静态资源,部署时需要把这些静态资源与二进制程序一起上传到服务器部署,在现今遍地花容器的今天,为了简化部署流程,能不能更进一

  • vue-cli4如何打包静态资源到指定目录

    vue-cli4如何打包静态资源到指定目录

    目录 打包静态资源到指定目录 解决 vue-cli打包访问静态资源404 打包静态资源到指定目录 在最近开发工作中,我打包的 dist 文件夹下,vue-cli4 打包(npm run build)的静态资源全部都平铺展开在该文件夹下,看着很别扭,于是想打包到 static 文件夹下. vue-cli4 执行打包命令时,默认打包的位置是dist文件夹下,不会自动打包为一个模块(文件夹). 解决 在 vue.config.js 文件中设置 assetsDir 指定打包的目录为根目录下的 stati

  • 浅谈vue引用静态资源需要注意的事项

    项目结构如下: 想在icon.styl文件夹里面引用字体图标,使用相对路径,但是报错 浏览器报错如下: 解决方案有两种: 方案1.使用根目录路径 方案2:将要引用的静态资源fonts文件夹放在static文件夹下 icon.styl文件下面的代码如下: 问题就解决了. 建议:静态资源统一管理在static文件夹下. 以上这篇浅谈vue引用静态资源需要注意的事项就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • 如何解决flask修改静态资源后缓存文件不能及时更改问题

    run.py from flask import url_for @app.context_processor # 上下文渲染器,给所有html添加渲染参数 def inject_url(): data = { "url_for": dated_url_for, } return data def dated_url_for(endpoint, **values): filename = None if endpoint == 'static': filename = values.g

  • vue-cli3访问public文件夹静态资源报错的解决方式

    今天在项目中使用了public文件夹里的静态资源,在本地测试没有发现问题,但是项目部署到fat服务器却报了404错误. 我发现原因在于我的项目没有部署在域名的根部,而我引用public文件是通过绝对路径方式引用的,因为就出现了路径错误. 路径如下: <img :src="`/image1.png`"> 在官网文档中发现这种情况需要为 URL 配置 publicPath 前缀:process.env.BASE_URL 正确的引用路径是: <img :src="

随机推荐