Vue项目打包上线过程踩的坑

最新推荐文章于 2023-03-29 11:36:52 发布
最新推荐文章于 2023-03-29 11:36:52 发布
阅读量180 收藏 1
点赞数
分类专栏： Vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dongdengke123789/article/details/118145452
版权

一直以为vue项目打包上线很容易，只需要执行“npm run build ”，将生成的代码直接放到服务器就可以了。但是，当自己真正打包上线的时候，就发现远远要比想象的困难，期间会遇到各种问题。此文主要记录一下打包上线遇到的坑，方便以后查阅，也希望帮助更多的开发者避免采坑。

Vue项目打包上线过程踩的坑

飞猫个人博客
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vue项目打包发布踩过的坑
youlinaixu的博客
11-13 4767
1.vue打包之后，背景图片不显示问题 找到build/utils.js文件 修改成为如下所示内容： 2.vue写成懒加载的方式，打包发布部署到服务器报错，修改为下面的内容config目录下的index.js的assetsPublicPath修改为下面的内容 3.vue从后台获取数据时，串接口数据，保存sessionid，vue中登录成功后台自动将token保存进入session缓存，解决前端...
Vue项目打包测试过程中遇到的坑
weixin_43744767的博客
08-19 493
一个vue小白，第一次打包vue项目，并在自己的电脑测试运行的过程。系统为windows。 1.打包命令:npm run build。打包后会出现一个dist文件，该文件为部署到服务器上的文件。 2.打包后在自己的电脑测试，证实是否与npm run dev命令模式结果相同。 首先，安装http-server，npm i -g http-server， 再 cd到dist目录下，运行http-server，若出现一下问题，则表示服务的执行策略不允许 解决方法：右键开始菜单，选择命令提示符/.
vue打包项目遇见的一些坑
qq_56992860的博客
05-26 294
前言 ：昨天在使用vue-cli的项目时，使用 npm run build 命令打包项目后，发现打包的文件无法使用图片与路由跳转。 路径全为错误信息 进行两步操作，实现打包项目正常使用 1.在vue.config.js 文件下添加代码 publicPath: './' ，指定打包时路径定义为相对路径 2.在 router 定义文件里面，不使用 histtory模式，虽然使用此模式会使代码在生产模式下运行时，路由没有烦人的 # ，但是会导致项目打包时，路径出错。（可能有办法兼顾路由和打包，但是作者没想到
vue打包上线问题
次顶级的博客
02-20 425
打包本地预览项目 路径要修改 ./ 默认是 / vue.config.js文件中配置publicPath 本地预览hash模式，才可以正常预览 上线修改为history模式（前端不需要做什么），后端需要重定向，不然出现空白页 ...
vue项目打包上线流程以及遇到的问题
weixin_50304773的博客
09-24 539
vue项目打包上线流程以及遇到的问题 1.打包上线过程 1.1如何打包？ 在项目的package.json文件中的build命令可以实现打包。 在终端执行命令npm run build,会在项目根目录下生成一个dist文件夹，打开文件夹如图。 打开phpStudy服务，将dist文件夹放至phpStudy文件下的WWW文件夹下即可在本地访问查看。 2.打包期间遇见问题 2.1 css,js等静态文件路径错误 更改配置文件。打开项目文件下config文件夹下的index.js文件，将其中的build
Vue项目的打包方式（生成dist文件）
热门推荐
商务合作 | 共同学习 | 携手共进
12-30 15万+
打包vue项目，生成dist文件夹。
Vue项目的打包上线步骤
Gik99的博客
03-29 915
Vue项目的打包上线步骤
vue项目打包后打开页面空白解决办法
08-27
Vue 项目打包后打开页面空白解决办法 在 Vue 项目开发中，经常会遇到打包后打开页面为空白的情况，本文将详细介绍解决这种问题的方法。 一、路径问题 在 Vue 项目中，index.html 文件中的内容都是通过 script ...
Vue项目上线打包步骤
qq_46034942的博客
05-15 6353
Vue项目打包上线
vue.js项目打包上线的图文教程
01-21
vue的项目如何上线，当时有千奇百怪的回答，我在想，这些人都是肿了么，vue的官方都说了，这个框架只是做了view这一层，所以并不是把这些开发完的东西直接拷贝到服务器上，而且需要打包为静态文件上传服务器的。...
vue-cli+iview项目打包上线之后图标不显示问题及解决方法
12-13
做vue项目使用的iviewUI库，打包上线之后发现icon都不显示，然后做了很多尝试，更改打包路径等，都没有太好的效果，最后还是在网上找到了方法： 1. 方法一： 在build/utils.js下面找到这段代码，将其中publicPath...
Vue项目中四种打包优化的方法
smouns_的博客
11-12 5778
默认情况下，通过import语法导入的第三方依赖包，最终会全部打包到一个js文件中，会导致单文件体积过大大，在网速底下时会阻塞网页加载，影响用户体验。 打包优化的目的: 1、项目启动速度，和性能 2、必要的清理数据 3、减少打包后的体积 第一点是核心，第二点呢其实主要是清理console 性能优化的主要方向: 路由懒加载 去除生产版console.log的打印输出 开发版使用依赖项，生产版使用在线CDN 项目打包及配置 1.异步组件配置(路由懒加载)
vue项目打包之后，element的图标显示小方框
张张张的博客
09-27 2766
这里这个limit 配置项会指定文件大小，小于limit的图片无法生成图片并以64格式引入，大于limit的图片将以url加载。
Vue项目打包上线部署的那些坑
qq_37942845的博客
09-25 841
1、跨域问题 开发环境的跨域可以直接在vue cofig中设置，这个没啥说的，打包完成后就一点关系都没了 解决方案： a.通过jsonp跨域 b.通过修改document.domain来进行跨域 c.使用window.name跨域 d.使用HTML5中新引进的window.postMessage方法来跨域传送数据 e.CORS 最好的解决办法我觉得还是后端给设置响应头解决跨域 2、打包完的版本问题 如果你用的npm、或者cnpm，打完包，再上线，过半年，重新install...
vue打包 element-icons.woff 和element-icons.ttf 字体文件路径错误，导致icon图标显示成小方块的问题。
dengzeyuan的博客
04-13 2万+
出现打包后icon图标变成小方块的原因只有两个 一。element-ui版本和element-ui/lib/theme-chalk/index.css版本不一致。 解决办法： 卸载已经有的element-ui npm uninstall element-ui 然后在安装新的 npm install element-ui 二。打包后的element-icons.woff 和el...
vue打包后字体图标显示小方块
小胡仙的博客
07-17 2272
解决方法： 修改build下的utils.js 如图： 没有这句话的添加一下就好
vue项目打包发布上线方法
lchmyhua88的博客
10-09 6717
vue项目开发完毕后，我们需要将项目打包上线，同时我们希望可以在本地预览生产环境项目。（以下以vue-cli脚手架生成的项目为例） 发布服务器 1、运行打包命令 npm run build 运行后生成dist文件夹,将dist文件夹发布在服务器中。 我们在nginx中通过代理来访问： 首先本地的代码在额米有打包之前： 在执行npm run build之后会在本地项目的根目录下面生成一个dist目录： 接着我们通过nginx代理来访问，NGINX配置如下： server { ...
关于vue打包上线遇到的坑
主要领域：前端开发
06-27 3万+
打包上线经常会经常遇到路径找不到，页面空白，那么下面我们就解决一下。 第一步、先找到config目录的index.js 改成如上图红框标注所示 第二步、找到build下的utils.js文件 加上如上图红框所示代码 最后我自己创建一个QQ交流群。 IT各行各业的人都有，欢迎大家加入， 分享自己的心得体会。 QQ群：716560543 ...
前端——electron-vue打包遇到的深坑，希望能帮到大家
Fidgety的博客
05-11 620
electron-vue项目打包（electron:build）1. 安装electron提供的打包插件2.配置打包信息（个人是在vue.config中配置的）执行打包命令 个人是使用cli脚手架搭建的electron 框架 1. 安装electron提供的打包插件 在当前项目根目录下安装打包插件 npm install electron-builder 或全局安装 npm install electron-builder -g 2.配置打包信息（个人是在vue.config中配置的） module.ex
vue项目打包上线流程
最新发布
04-04
2. 执行打包命令：在项目根目录下执行打包命令，如npm run build或yarn build，等待打包完成。 3. 部署静态文件：将打包生成的静态文件（通常在dist目录下）上传至服务器的指定目录中。 4. 配置服务器：在服务器上...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

飞猫个人博客

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值