01：React实战笔记：上线的坑

最新推荐文章于 2023-05-08 15:08:57 发布
最新推荐文章于 2023-05-08 15:08:57 发布
阅读量130 收藏
点赞数
分类专栏： 项目的坑 学习笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/znbb_/article/details/116117410
版权

文章目录

1.打包命令

npm run build

2.修改配置等

项目是用脚手架创建的，有关webpack配置在node-modules下的raect-scripts下的path.js中；不过我们不用显式修改它，以下贴出具体配置步骤（假设项目运行地址:https://你的域名/项目名）
以下就举例以https://xxxxx.cn/project 假定为你的线上项目地址


项目根目录下新增.env文件加入PUBLIC_URL = https://xxxxx.cn/project（此地址为假定的线上运行地址)


改index.html中引入js文件路径为%PUBLIC_URL
最低0.47元/天 解锁文章
znbb_
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue工程打包上线样式错乱问题 - bug解决（4种）
草巾冒小子的博客
03-13 1万+
vue工程打包上线样式错乱问题 - bug总结 项目开发完成后，执行npm run build 进行打包，将打包完成的dist文件部署在服务器。配置好域名解析，就可以实现工程上线。上线后，我们有时候会发现，它怎么和本地调试时长得不一样？ 长得不一样是样式问题，是打包的时候顺序先后问题，有一些样式没有生效，有一些样式被覆盖了。这时候可以考虑以下几种方法。 1.main.js样式引入顺序问题 ...
React部署失败问题总结
523varaChen
02-16 619
React开发的部署通常包括两个主要方面：构建应用程序和将应用程序部署到服务器。在React开发过程中，可能会遇到各种部署问题，本文将介绍一些常见的部署问题并提供解决方案。
react项目部署到服务器上样式丢失
wangweiscsdn的博客
05-08 320
样式丢失
Vue项目本地run与build后样式不同，build后样式不生效
源码好优多
03-08 5957
在Vue项目开发过程中遇到两次，本地运行正常，build后在服务器上样式没有生效，或者在本地的效果没有正常显示， 下面一一说明： 一、多个相同样式文件同时存在项目中 现象：修改组件时，在项目中复制了一个组件重命名后进行修改，在本地执行正常，后打包上传，无法展示正常效果。 解决过程：在本地试图修改总是不见效果，在控制台查看样式仍是之前的样式，把其中一处样式在所有相关组...
React 打包部署服务器踩坑记录
小小云麓的博客
01-31 4684
公司项目前端开发用的是React,所以自己一直在本地测试开发，最后终于开始打包上线了 项目中用axios封装了工具类来请求，自动匹配开发和测试api if (process.env.NODE_ENV === 'development') { axiosIns.defaults.baseURL = '/dapi'; } else if (process.env.NODE_ENV =...
ReactJS-study:React学习笔记
04-11
ReactJS研究React学习笔记
React-redBook:React实战小红书App
05-06
React实战小红书App(含截图和录屏) 技术栈 技术栈: React + ES6 + redux + axios + stylus + webpack + react-lazyload UI框架: swiper + better-scroll + antd-mobile 项目进度 7-06 项目环境搭配完成 7-11 完成...
Course-Notes-React:React课程笔记
03-12
安装您必须在终端上执行-npm install-在node_modules的终端上不要忘记在终端上执行json服务器--watch api / db.jsonnpm运行开始
learning-react-native：React Native学习笔记本
02-05
React Native学习笔记 欢迎您帮忙纠错，一起帮助更多的人，学习交流QQ群： React本机 开发工具 [使用WebStorm调试React Native] [故事书] [reactotron] 节点相关 最佳拍档 原生集成 模拟与测试 [easy-mock介绍] ...
notes_of_React:react学习笔记和记录
05-16
reactLearningNotesreact学习笔记和记录
React项目如何打包发布及遇到的坑
热门推荐
天工开物
06-29 5万+
刚开始学习react，遇到一些小问题。我使用的是create-react-app脚手架生成的项目。这个脚手架一键生成react项目，非常方便。先简单记录一下这个新建项目的过程。一、打包1、安装使用npm install -g create-react-app 122、生成新项目create-react-app my-app 12(生成的项目最好不要用驼峰式命名，否则后面生成文件提示也会让你改)３、...
React-npm run build打包不同参数
小马总的博客
04-11 4569
手动配置config 引用包 import {resolve} from 'path'; 基于umi的获取实现方式 命令格式 后面的参数随便传输 npm run build MainVersion=1.0.0 DataVersion=10.6 OnlineDate=2019-04-11 17 获取npm run build 后面参数代码Process这个必须导入包才可以获取 ...
react.js报错信息（四）之npm run build打包空白报错
追梦猪的博客
09-03 1027
React项目npm run build打包上线后，页面出现空白的原因同vue打包空白错误一样就是路径问题，在react打包运行的时候出现了下面的错误，很头疼是吧，这是js错误可能是我们引的路径不正确，查找方法：解决方法就是在你还没打包之前找到package.json这个文件，添加一...
Vue使用npm run build 打包样式与本地不符
itgaojian1994的博客
02-27 2049
npm 打包文件超出限制
vue npm run build 与npm run dev 样式不同
欢迎所有人，批评指正！
10-21 2143
添加 scoped,可以试试 <style scoped> </style>
cryptography-0.9-cp34-none-win32.whl
06-18
Python库是一组预先编写的代码模块，旨在帮助开发者实现特定的编程任务，无需从零开始编写代码。这些库可以包括各种功能，如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库，如NumPy、Pandas和Requests，极大地丰富了Python的应用领域，从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径，而且为经验丰富的开发者提供了强大的工具，以高效率、高质量地完成复杂任务。例如，Matplotlib和Seaborn库在数据可视化领域内非常受欢迎，它们提供了广泛的工具和技术，可以创建高度定制化的图表和图形，帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。
antdpro Demo
最新发布
06-18
antdpro Demo
m3u8播放器源码 ,ckplayer播放m3u8.zip
06-18
m3u8播放器源码 ,ckplayer播放m3u8
大众点评全国生活服务POI采集420万家-2024年5月底（部分一千家展示）
06-18
（部分一千家展示） 数据说明： 1、基础信息只有店铺id、店铺名称、十分制的子评分、地址、人均消费、评价数量、店铺类型、所在省、市、区、商圈(街道)字段。 2、电话、五分制总评分、经纬度等其他详细字段是没有的，且店铺名超过15个汉字后会省略后面名字。 3、数据完整性：大众点评数据采集原理是按分类把城市拆解为最小单位（商圈/街道），每种请求的返回上限是750家店铺。有两种情况会漏采，一种是最小单位商圈街道的最小分类仍然超过750，超出部分会漏采，这部分极少；另一种是部分店铺只属于区县，不属于下属街道，这时候会有部分漏采；综合来看，漏采率在5%以内，且排在后面被漏采的都是权重最低的店铺。 4、可少量单独采集电话、经纬度、团购信息等丰富字段，但无法批量采集。可采集各市各区的各类销量榜单、回头客榜单、好评榜单、热门榜单。 2024年5月底最新大众点评店铺基础信息采集。含美食、休闲娱乐、结婚、电影演出赛事、丽人、酒店、亲子、周边游、运动健身、学习培训、医疗健康、爱车、宠物、生活服务、购物、家装家居等十几大类近三千万家店铺信息。
vue3中ReferenceError: React is not defined
09-01
在Vue 3中，当你在代码中使用了React相关的内容时，会出现"ReferenceError: React is not defined"错误。这是因为Vue 3并不依赖于React，所以React相关的内容无法被识别。这个错误通常是因为你的代码中引入了React相关的库或语法，而Vue 3并不支持这些内容。 要解决这个问题，你可以按照以下步骤进行操作： 1. 检查你的代码，确保没有引入不支持的React相关内容，比如使用了React的组件或语法。 2. 查看你的项目配置文件babel.config.js，并确认是否正确配置了babel。在Vue 3中，不需要配置React相关的内容，可以删除或注释掉与React相关的配置。 3. 如果你使用了Vite来搭建项目，可以尝试添加`@vitejs/plugin-vue-jsx`插件来支持Vue 3中使用类似JSX语法的功能。安装插件可以通过运行`yarn add '@vitejs/plugin-vue-jsx'`命令来实现。 4. 在vite.config.ts文件中，确保已经添加了`vueJsx()`插件，这样就可以支持在Vue 3中使用类似JSX语法的功能。 总结一下，解决"ReferenceError: React is not defined"错误的步骤如下： 1. 检查代码，确保没有引入不支持的React相关内容。 2. 检查babel.config.js文件，删除或注释掉与React相关的配置。 3. 安装并配置`@vitejs/plugin-vue-jsx`插件，以支持在Vue 3中使用类似JSX语法的功能。 这样，你就可以解决"ReferenceError: React is not defined"错误，并成功在Vue 3中运行你的代码了。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [vite+vue3.0 jsx (tsx) 踩坑报错ReferenceError: React is not defined](https://blog.csdn.net/weixin_44441196/article/details/118727593)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *3* [ReferenceError: React is not defined报错解决方案](https://blog.csdn.net/weixin_44461275/article/details/122586214)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值