vue-cli2.9.2项目（element-ui）打包上线详解

最新推荐文章于 2023-04-06 09:56:33 发布
最新推荐文章于 2023-04-06 09:56:33 发布
阅读量632 收藏 1
点赞数
文章标签： javascript vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45064565/article/details/106852765
版权

使用vue-cli2.9.2项目打包上线需要注意两个方面

1、打包上线后，页面为白色。静态资源加载不了

原因分析：这是访问路径的问题，原本设置的是直接访问项目文件的根路径 assetsPublicPath: ‘/’，在本地测试是没有问题的，因为你静态资源的访问就是相对于跟路径的路径，可是你在taocat等服务器软件中发布的时候，所访问的根路径是整个端口的根路径，不是以该文件夹为准。所以需要换成 assetsPublicPath: './'来访问
在这里插入图片描述

2、结合element-ui的字体图标失效

这个还是路径的问题
在这里插入图片描述
将utils.js文件夹里的新增属性publicPath:"…/…/" 同时上述也可以解决static文件夹下img访问不到的问题

巅男
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ElementUI项目优化上线
寒冰屋的专栏
02-03 634
文章目录介绍项目优化1、 生成打包报告2、 通过 vue.config.js 修改 webpack 的默认配置3、 为开发模式与发布模式指定不同的打包入口4、 configureWebpack 和 chainWebpack5、 通过 chainWebpack 自定义打包入口6、 通过 externals 加载外部的 CDN 资源7、 通过 CDN 优化 ElementUI 的打包8、 首页内容定制9、 路由懒加载项目上线项目上线的相关配置总结 介绍 此优化说明主要针对的是通过 UI 界面创建的项目，对于通过
vue编辑页面和新增_饿了么技术团队vue开源框架Element最新版本2.9.1版本
weixin_39815345的博客
11-20 192
简介Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库，基于MIT协议。目前github star 数为38k+, 是一款非常热门的桌面端组件库。对于前端开发的朋友们Element既有基于vue版本的组件库，也有基于angular版本的组件库，当前前端开发"三国鼎立"的时刻，Element 可以说是非常值得好好学习的一个桌面端组件库。官网截图2.9 版本更新新...
【vue】vue +element 搭建项目，vue-cli 如何打包上线
weixin_33893473的博客
08-22 104
以自己的项目为例 第一步：手动修改config文件夹中的index.js文件中的build对象，将 assetsPublicPath 中的 “/” ，改为 “你实际的加载路径” 如图： 第二步：执行(c)npm run build 第三步：发现目录下多一个dist的文件夹，双击点击index.html,就可以在本地查看效果 如图： ps:注意事项 　　A.如果在con...
element源码解析--打包构建
半个夕阳的博客
02-12 3579
前言 本篇文章主要对 element 框架的 build 目录 及 package.json 中的 scripts 脚本，也就是element项目的脚本构建打包进行解析。 element 的打包构建 废话不多说，先来张图： 对于node项目，除了对整体结构的浏览，第一步要做的事，就是查看项目的核心文件，package.json。由于本篇主讲scripts，需要了解其他字段的，可在官方文档查看 p...
vue-cli3.0+element-ui上传组件el-upload的使用
10-17
在本篇文章中，我们将详细探讨如何在vue-cli3.0环境中使用Element UI的上传组件el-upload。el-upload组件允许用户上传文件，并且可以进行一系列的定制和限制，以满足各种需求。 首先，`<el-upload>`组件的基本用法...
electron-vue + vue-cli + element-ui 实时热更新版v12.0.4框架.rar
05-06
electron-vue + vue-cli + element-ui 实时热更新版，electronv12.0.4框架，打包好的框架，拿来即用，实时热更新，提高开发3倍效率
详解vue-cli构建项目反向代理配置
01-19
本文介绍了vue-cli构建项目反向代理配置，分享给大家，具体如下： proxyTable: {//配置请求代理 '/dlsys':{ target:'http://192.168.16.209:81', changeOrigin:true, pathRewrith:{ '^/dlsys': '/dlsys' } }, '/...
基于vue-cli 的 Element UI 的后台系统模板
02-21
总之，"基于vue-cli 的 Element UI 的后台系统模板"是一个高效开发后台应用的良好起点，利用 Vue CLI 的便利性和 Element UI 的强大组件，开发者可以快速构建出功能完备、视觉美观的后台管理系统。同时，项目中还...
Vue使用vue-cli创建项目
01-19
本文介绍了Vue使用vue-cli创建项目，分享给大家，具体如下： vue-cli 是一个官方发布vueJS项目脚手架：https://github.com/vuejs/vue-cli 我创建的模板项目：...
基于vue-cli3的element-ui的一个项目的基础框架
02-25
基于vue--cli3与element搭建的基本框架，基础配置已经配置完成，可以直接写页面
Vue2项目上线打包优化
kangaroo的博客
11-09 3363
vue项目各种上线优化汇总，不定时更新
Vue项目的打包上线步骤
Gik99的博客
03-29 828
Vue项目的打包上线步骤
vue-cli ,vue2项目的完整搭建，新建，配置，路由配置，API封装，到打包上线
lin_s_c的博客
08-05 5453
发现当我重新开发一个项目的时候，偶尔会忘记某些步骤，所以做个整理便于以后查看！项目开始的时候当然是做技术选型，还有用什么框架啊，插件啊，都先设计好，这样在开发过程中也不会太曲折！ 项目搭建的过程，在本文中划分为6个部分 安装node，安装全局vue，安装vue-cli检查安装是否成功 因为个人习惯这里用vue2来举例，新建一个文件夹，进入到文件夹，命令行输入如下图所示：安装 进入项目：启动项目：浏览器打开： 这时候项目就新建完成啦～可以开始进行创作 附加：vue项目目录讲解 最常用的是esline配置
微信小程序包大小超过2M的解决方法—分包加载
joe0235的博客
04-06 4817
小程序的包被限制在2M以下， 超出的时候点击预览， 发现报错
Vue2.9.6 cli项目部署到springboot静态文件夹
YMY_666的博客
11-24 617
首先在项目根目录npm run build打成dist包 然后将dist包下的index.html,js,css,fonts复制到springboot的static文件夹下 然后使用IDEA的eclipse快捷键ctrl+alt+L格式化代码，将css和js的路径修改为相对路径 如果你使用了element-ui,还需要再修改css引用字体的路径为相对路径 然后启动springboot项目输入‘http://域名:端口/index.html’就可以正常访问了，页面也可以正常调用后端接口 ...
Vue-cli（2.9.6）快速构建一个 Vue 项目
从事厨房信息化行业，万能对接所有点餐系统，kds，智能控菜，酒店协调软件
09-22 2310
另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。原文链接：https://blog.csdn.net/guangwenyin/article/details/123462007。一个库，提供自己的 API，同时提供上面提到的一个或多个功能，如 vue-router。webpack官网：https://webpack.docschina.org/Vue.js官网：https://cn.vuejs.org/
【Vue】Vue项目打包上线流程--20221219
Season CSDN博客
12-19 2747
Vue项目打包上线流程
vue2.0 项目打包上线，自定义打包配置
m0_53251830的博客
09-18 1839
vue2.0 项目打包上线，自定义打包配置
Vue-cli2 + webpack搭建vue项目流程以及打包发布流程
是一座岛
04-25 5156
目录 1.1 命令行初始化项目 1.2 分析项目目录 1.3 运行项目 1.4 多环境配置打包发布 一. vue-cli2 + webpack搭建项目流程以及打包发布流程 最近升级到vue-cli3，发现vue-cli2搭建项目命令不能用了，两者搭建开发环境项目内容也发生了变化。 vue-cli2搭建项目环境的命令：vue init webpack vue2-webpack-proj...
electron-vue + vue-cli + element-ui 实时热更新版
最新发布
08-09
它集成了vue-cli和element-ui，使得开发者能够使用Vue.js的开发方式来构建桌面应用，并且可以使用element-ui的组件库来简化界面的开发工作。 Vue-cli是Vue.js官方提供的脚手架工具，可以帮助开发者快速搭建Vue.js...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值