linux办公网
本地React构建正常，但服务器构建的js css文件出现404错误。如何让parcel正确构建路径？
创始人
2024-11-30 00:31:26
0次

要让Parcel正确构建路径，你可以使用--public-url选项来指定公共 URL，以确保服务器上的文件路径是正确的。

以下是示例代码：

  1. 在package.json中添加一个构建脚本：
{
  "scripts": {
    "build": "parcel build src/index.html --public-url ./"
  }
}
  1. 在根目录下创建一个名为.env的文件，并在其中添加以下内容：
PUBLIC_URL=/
  1. 在你的React组件中使用process.env.PUBLIC_URL来获取公共 URL：
import React from "react";

const MyComponent = () => {
  return (
    

      Logo
      
    

  );
};

export default MyComponent;

这样，当你在本地构建时，process.env.PUBLIC_URL会被替换为./，而在服务器构建时，它会被替换为根目录/，从而确保文件路径是正确的。

运行npm run build来构建你的项目，并将生成的文件上传到服务器上，确保你的服务器配置正确，以正确地提供静态文件。

上一篇：本地React Native iOS构建成功，但在CI服务器上失败。

下一篇：本地React开发版本在IE中显示空白页面。

相关内容

热门资讯

前端-session、jwt 目录：   （1）session （2&#x...
linux入门---制作进度条 了解缓冲区 我们首先来看看下面的操作： 我们首先创建了一个文件并在这个文件里面添加了...
关于测试，我发现了哪些新大陆 关于测试 平常也只是听说过一些关于测试的术语，但并没有使用过测试工具。偶然看到编程老师...
前缀和与对数器与二分法 1. 前缀和 假设有一个数组，我们想大量频繁的去访问L到R这个区间的和，...
nodejs：本地安装nvm实... 一、背景-使用不同版本node的原因 vue3+ts、nuxt3版本，node...
JAVA集合知识整理 Java集合知识整理 HashMap相关 HashMap的底层数据结构：jdk1.8之...
无刷直流电机介绍及单片机控制实... 无刷直流电机介绍及单片机控制实例前言基本概念优势与劣势使用寿命基本结构使用单片机控制实例电子调速器&...
fwdiary(2) dp2 1.传纸条  AcWing 275. 传纸条 - AcWing 走两条路，走一条最大的...
常用的DOS命令 常用的DOS命令 DOS（Disk Operating System，磁...
＜C++＞ 类和对象(下) 1.const成员函数将const修饰的“成员函数”称之为const成员函数，cons...