vue打包问题

最新推荐文章于 2024-05-11 09:27:18 发布
原创 最新推荐文章于 2024-05-11 09:27:18 发布 · 234 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文探讨了项目打包后遇到的资源路径加载404及图片路径错误的问题，提出了解决方案，包括修改config/index.js配置文件和在build/util.js中添加特定代码。

汇总各种打包问题~

  • 打包后的资源路径加载404，修改config/index.js
    在这里插入图片描述

  • 打包后部分图片路径不对，大多数已经编译成base64格式了，部分有问题在build/util.js添加代码
    在这里插入图片描述

springBoot + vue前后端分离项目部署到服务器
葫芦娃的博客
11-27 1万+
一、npm run build将前端打包成静态文件（会在dist目录下生成static文件夹以及index.html文件） 上图为：config目录index.js配置的build以及dev命令，如果你没找到static文件夹及index.html，到这里看一下你的路径是否配置的是dist路径； 二、在springboot项目，resources目录下，将打包好的静态文件夹及index.html...
Vue3.0如何在setup中获取定义的全局方法
asdfghjkl_6的博客
06-27 656
有些情况下我们需要定义全局方法 然而在vue3.0中我们定义全局方法需要在globalProperties上面定义大部分情况下还是可以定义在main.js中的 我们这里就以定义在main.js中为例 // 这里我们就简单的随便添加一个属性 import { createApp } from 'vue' import App from './App.vue' import router from './router' import store from './store' let app = c
vue bind绑定this上下文
weixin_30889885的博客
10-22 2687
vue methods中的函数是如何强制绑定到vue实例中的 箭头函数中的this 转载于:https://www.cnblogs.com/knuzy/p/9829269.html
vue基本配置
wushihang11的博客
02-27 523
重要配置文件 1、build/webpack.base.conf.js 源码配置解读 entry：app:’./src/main.js’ app是生成的容器节点名称 output（输出）： path：配置路径 filename：build后生成的文件名 publicPath：资源路径上下文 resolve（作一些设置） extensions：可以省掉的后缀名 alias：别名 modul...
Vite构建的Vue3项目打包后dist文件夹放Nginx服务器访问添加上下文路径
成长之路
07-11 4213
Vue3项目打包后如何添加访问路径，vite.config.ts、Nginx如何配置
Vue2前端增加上下文
最新发布
wangxin1949的博客
05-11 1638
1- 项目部署时存在两个Nginx, 一个Nginx支持vue项目的基本配置, 但是项目入口要配置在上一层Nginx上, 而且上一层Nginx包装了一层上下文; 2- 页面跳转时要保持上一层Nginx的上下文; 3- URL可以正常刷新上层Nginx的上下文转发时不转发到下层Nginx, 只做一层上下文的包装.原因: 默认打包状态中静态资源加载路径单独设置. 解决方案: vue.config.js文件中找到modules.export中的publicPath参数, 该参数前面拼接上上层Nginx上下文即可;
vue项目打包与配置-学习笔记
小猴子的博客
07-22 6880
文章目录vue项目打包与配置-学习笔记前端打包打包的代码如何运行打包指定不同的环境变量(开发，测试)打包手动配置文件打包压缩，大文件处理gzip进一步压缩打包app打包部署模式 vue项目打包与配置-学习笔记 前端打包 npm run build – package.json -- vue-cli-service build – 发布到线上的代码，不便于调试 打包发布到测试环境 –增加打包命令 开发(后端地址) 测试(后端地址) 线上(后端地址) –npm run build:dev --开发
解决Vue打包后访问图片/图标不显示的问题
10-16
总结一下，解决Vue打包后图片和图标不显示的问题主要涉及两个步骤：一是检查并修正CSS中引用资源的路径，二是通过配置`publicPath`让Vue CLI在打包时自动处理资源路径。完成这两个步骤后，你应该能够成功地在生产...
vue打包静态资源后显示空白及static文件路径报错的解决
10-14
在处理Vue打包问题时，还需要注意以下几点： 1. 确保配置文件中的各种路径设置与你的服务器配置和部署环境相匹配。 2. 如果你决定在生产环境中使用history模式，要确保服务器配置了适当的重定向规则，以支持单页...
Vue打包后访问静态资源路径问题
12-13
Vue介绍中static文件夹里放的是静态资源目录，如图片、字体等。 我们发现运行npm run start后本地图片路径是没问题的，...以上就是Vue打包后访问静态资源路径问题的相关知识点，感谢大家的阅读和对软件开发网的支持。
解决vue打包项目后刷新404的问题
08-27
总之，解决Vue打包后刷新404的问题主要是通过正确配置服务器，确保所有请求都能导向Vue应用的入口HTML文件，让前端路由有机会处理路由跳转。通过理解这一机制，你可以更好地管理和部署Vue应用，提供更流畅的用户体验...
解决vue打包之后静态资源图片失效的问题
08-28
解决 Vue 打包之后静态资源图片失效的问题 在 Vue 项目中， 经常会遇到一个问题，即在打包之后静态资源图片失效的问题。这种问题可能会导致图片无法显示，控制台中提示某个图片没有找到（404 错误）。这种问题的...
vue-ls：Vue插件，用于Vue上下文中的本地存储，会话存储和内存存储
02-02
语言 Vue插件可用于Vue上下文中的本地存储，会话存储和内存存储 jsFiddle示例 安装 CDN 推荐： : ，它将在发布到npm时立即反映最新版本。 您也可以在浏览npm软件包的源代码。 也可以在或，但是这两个服务需要花费一些时间才能同步，因此最新版本可能尚不可用。 NPM npm install vue-ls --save 纱 yarn add vue-ls 凉亭 bower install vue-ls --save 开发设置 # install dependencies npm install # build dist files npm run build 用法 Vue存储API。 import Storage from 'vue-ls' ; options = { namespace : 'vuejs__' , // key prefix name : 'ls' , // name variable Vue.[ls] or this.[$ls], storage : 'local' , // storage name session, l
解决vue 打包发布去#和页面空白的问题
12-12
1.vue项目中config文件下index.js中打包配置 build: { // Template for index.html index: path.resolve(__dirname, '../yiTownWebApp/index.html'), // Paths assetsRoot: path.resolve(__dirname, '../yiTownWebApp'), assetsSubDirectory: 'static', assetsPublicPath: '/yiTownWebApp/',//这个地方使用绝对路径很重要 /** * Source Map
详解Vue项目编译后部署在非网站根目录的解决方案
01-19
同一个生产部署项目，基内外网的访问路径并不相同，内网是基于域名根目录来访问，而外网却指向了一个子目录。 eg. ： vue-router: history模式 内网环境：192.168.1.1:8080/index.html 外网环境：domain.com/ttsd/index.html 由于开发出来的项目是要部署在客户方，且客户并不想单独拿一个域名（或子域）来部署，这时，打包后的程序就要作一些配置方面的修改了。 修改配置文件 1、把打包后的资源引用修改为相对路径 找到 config/index.js 中 build 属性下的 assetsPublicPath build: { ...
vue 上下文间距_一个简单的vue上下文菜单组件
cuk5239的博客
07-26 1276
vue 上下文间距 语境 (vue-context) A simple yet flexible context menu for Vue. It is styled for the standard ul tag, but any menu template can be used. The only dependency this package has is Vue, so the majo...
vue打包优化(持续更新)
qq_41400354的博客
06-06 690
Vue打包优化持续更新
前端项目--配置上下文
weixin_30275415的博客
09-18 1231
参考“tomcat启动前端项目”：https://www.cnblogs.com/mySummer/p/11167224.html 配置前端项目访问的上下文：方法如下： 配置完成之后，打dist包： 然后配置nginx： 1 server { 2 listen 8089; 3 ...
vue项目打包步骤
热门推荐
从零出发
06-25 31万+
vue项目打包终端运行命令 npm run build打包成功的标志与项目的改变，如下图：点击index.html，通过浏览器运行，出现以下报错，如图：那么应该如下修改呢？具体步骤如下：1、查看package.js文件的scripts命令2、打开webpack.dev.conf.js文件，找到publicPath: config.dev.assetsPublicPath,按Ctrl点击，跳转到in...
解决electron-vue打包依赖资源下载问题的压缩包方案
资源摘要信息:"electron-vue-build-package.zip是一个关于electron-vue打包问题的资源压缩包。由于网络原因，electron-vue在打包过程中可能会遇到一些依赖资源无法下载的问题。为了解决这个问题，所有打包需要下载的...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值