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

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

这篇博客记录了在React项目中遇到的线上部署问题，包括使用`npm run build`进行打包，以及如何修改配置适应线上环境。文章强调了在项目基于react-scripts构建的情况下，虽然webpack配置位于node_modules下，但通常无需直接修改。文中提供了详细配置步骤，假设线上项目地址为https://xxxxx.cn/project。

文章目录

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元/天 解锁文章
前端跨平台开发：React Native vs Flutter
小白菜的博客
06-01 1303
想象一下：你要开一家奶茶店，需要同时做iOS和安卓的点单APP。如果用传统“原生开发”（iOS用Swift/Objective-C，安卓用Kotlin/Java），相当于请了两支装修队——一队用木头，一队用砖块，不仅成本翻倍，后期改个菜单样式还要分别沟通，麻烦得很！跨平台开发的目标就是“一支装修队，两种材料都能搞定”，让开发者用一套代码生成iOS和安卓的APP，降低开发、维护成本。本文聚焦当前最主流的两大跨平台框架：React Native（Meta开发）与Flutter（Google开发）。
react.js报错信息（四）之npm run build打包空白报错
追梦猪的博客
09-03 1154
React项目npm run build打包上线后，页面出现空白的原因同vue打包空白错误一样就是路径问题，在react打包运行的时候出现了下面的错误，很头疼是吧，这是js错误可能是我们引的路径不正确，查找方法：解决方法就是在你还没打包之前找到package.json这个文件，添加一...
vue工程打包上线样式错乱问题 - bug解决（4种）
草巾冒小子的博客
03-13 1万+
vue工程打包上线样式错乱问题 - bug总结 项目开发完成后，执行npm run build 进行打包，将打包完成的dist文件部署在服务器。配置好域名解析，就可以实现工程上线。上线后，我们有时候会发现，它怎么和本地调试时长得不一样？ 长得不一样是样式问题，是打包的时候顺序先后问题，有一些样式没有生效，有一些样式被覆盖了。这时候可以考虑以下几种方法。 1.main.js样式引入顺序问题 ...
npm 常用命令
weixin_28726801的博客
09-29 3104
# 克隆项目 git clone https://github.com/PanJiaChen/vue-element-admin.git # 进入项目目录 cd vue-element-admin # 安装依赖 npm install # 建议不要用 cnpm 安装 会有各种诡异的bug 可以通过如下操作解决 npm 下载速度慢的问题 npm install --registry=http...
npm run buildViews命令详解及使用示例
最新发布
Leon_Jinhai_Sun的博客
05-28 542
npm run buildViews命令详解及使用示例
React部署失败问题总结
523varaChen
02-16 887
React开发的部署通常包括两个主要方面：构建应用程序和将应用程序部署到服务器。在React开发过程中，可能会遇到各种部署问题，本文将介绍一些常见的部署问题并提供解决方案。
react项目部署到服务器上样式丢失
wangweiscsdn的博客
05-08 589
样式丢失
Fullstackopen迷你项目：React应用开发与构建指南
“Fullstackopen迷你项目”这一标题所指向的项目是一个典型的基于现代前端技术栈（尤其是React框架）构建的全栈开发学习项目，旨在帮助开发者掌握从基础开发到部署全流程的关键技能。该项目依托于Node.js生态中的npm...
React+Node.js实战(1)：开发环境搭建
小楼秋风
04-03 1763
安装Node.js # 官网下载Node.js安装包（LTS版） https://nodejs.org/zh-cn/ # 执行安装并验证是否成功 node --version # npm npm -version npm -help # cnpm npm install -g cnpm --registry=https://registry.npm.taobao.org cnpm -version # yarn（速度快、安全、可靠） https://yarnpkg.com/ npm instal
叩丁狼前端开发笔记：HTML到React全栈技术解析
该笔记以实战为导向，结合大量代码示例、项目实践和原理剖析，适合初学者入门以及中高级开发者查漏补缺、深化理解。以下将围绕标题、描述及标签所涉及的技术点进行详细的知识体系梳理与深入解析。 首先，HTML...
Vue项目本地run与build后样式不同，build后样式不生效
源码好优多
03-08 6154
在Vue项目开发过程中遇到两次，本地运行正常，build后在服务器上样式没有生效，或者在本地的效果没有正常显示， 下面一一说明： 一、多个相同样式文件同时存在项目中 现象：修改组件时，在项目中复制了一个组件重命名后进行修改，在本地执行正常，后打包上传，无法展示正常效果。 解决过程：在本地试图修改总是不见效果，在控制台查看样式仍是之前的样式，把其中一处样式在所有相关组...
vue2-preview 生产环境打包报错
小仙女的博客
10-28 2027
情况：vue项目里使用了vue2-preview插件，但是在npm run build的时候打包报错 原因：因为vue2-preview插件里使用了ES6的语法，而我的webpack的babel-loader配置把node_modules文件下的代码除外了 { test: /\.js$/, use: 'babel-loader', exclude: /node_...
若依SpringBoot+Vue分离版打包部署（前端）
前端颜小白
06-27 3124
遇到的问题为vue项目webpack-dev-server配置后本地连接服务器地址正常请求，但是打包之后请求服务器接口一直是404；1.npm run build:prod 打包 2.npm run preview 打包正式环境预览.env.product(生产环境配置)文件，我这边是将接口地址也放到了里面VUE_APP_API_URL vue.config.js文件 反向代理及路由重写 .env.product和vue.config.js文件进行修改后即可打包npm run build:pr
vue项目 npm run build 后打开 index.html 空白,某些图片字体文件加载不出来解决办法
qq_39398332的博客
08-29 3335
1、修改config下面的index.js中bulid模块导出的路径 build: { // Template for index.html index: path.resolve(__dirname, '../dist/index.html'), // Paths assetsRoot: path.resolve(__dirname, '../dist')...
vue 打包npm run build执行不了时，把这段npm版本监测注释了就可以解决
wangqin5436的博客
11-12 819
关于vue的npm run dev和npm run build
weixin_30852367的博客
06-30 2838
├─build │ ├─build.js │ ├─check-versions.js │ ├─dev-client.js │ ├─dev-server.js │ ├─utils.js │ ├─vue-loader.conf.js │ ├─webpack.base.conf.js │ ├─webpack.dev.conf.js │ ├─webpa...
React 打包部署服务器踩坑记录
小小云麓的博客
01-31 4936
公司项目前端开发用的是React,所以自己一直在本地测试开发，最后终于开始打包上线了 项目中用axios封装了工具类来请求，自动匹配开发和测试api if (process.env.NODE_ENV === 'development') { axiosIns.defaults.baseURL = '/dapi'; } else if (process.env.NODE_ENV =...
React-npm run build打包不同参数
小马总的博客
04-11 4760
手动配置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项目如何打包发布及遇到的坑
热门推荐
天工开物
06-29 5万+
刚开始学习react，遇到一些小问题。我使用的是create-react-app脚手架生成的项目。这个脚手架一键生成react项目，非常方便。先简单记录一下这个新建项目的过程。一、打包1、安装使用npm install -g create-react-app 122、生成新项目create-react-app my-app 12(生成的项目最好不要用驼峰式命名，否则后面生成文件提示也会让你改)３、...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值