首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

本地React构建工作正常,但在服务器上构建js css文件时出现错误404。如何让parcel正确构建路径?

在服务器上构建React项目时出现404错误,可能是由于路径配置不正确导致的。为了让parcel正确构建路径,你可以尝试以下几个步骤:

  1. 确保你的服务器配置正确:检查服务器的静态文件目录是否正确设置,并且可以正确访问。例如,如果你使用的是Nginx服务器,你可以在配置文件中添加类似以下的配置:
代码语言:txt
复制
location /static {
    alias /path/to/your/static/files;
}

这样,当访问/static路径时,服务器会返回对应的静态文件。

  1. 检查parcel的配置文件:在项目根目录下,查找并打开.parcelrc文件,确保其中的路径配置正确。例如,你可以尝试添加以下配置:
代码语言:txt
复制
{
  "extends": "@parcel/config-default",
  "targets": {
    "main": {
      "publicUrl": "/static/"
    }
  }
}

这样,parcel会将构建后的文件输出到/static路径下。

  1. 检查React项目中的路径引用:在React项目中,确保你正确引用了静态资源的路径。例如,在使用<link><script>标签引入CSS和JS文件时,确保路径是相对于服务器根目录的。例如:
代码语言:txt
复制
<link rel="stylesheet" href="/static/styles.css">
<script src="/static/bundle.js"></script>

这样,当访问页面时,浏览器会正确请求对应的静态文件。

总结起来,要让parcel正确构建路径,你需要确保服务器配置正确、parcel配置正确,并且在React项目中正确引用静态资源的路径。这样,你就可以在服务器上成功构建js和css文件了。

关于腾讯云相关产品,你可以参考腾讯云的云服务器(CVM)和对象存储(COS)等产品,它们提供了强大的服务器和存储能力,适用于各种云计算场景。你可以访问腾讯云官网了解更多详情:

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

懒人Parcel

; Parcel 内置了一个开发服务器,这会在你更改文件自动重建你的应用程序,并支持模块热替换,以便你快速开发,你只需要制定入口文件即可: parcel index.html 使用-p <port number...这也意味着您不需要手动配置转换来包含和排除某些文件,或者知道第三方代码是如何构建的,以便在你的应用程序中使用它。...):很多时候我们只用到了库中的一个函数,结果 Parcel 把整个库都打包了进来; 一些依赖会 Parcel 出错:当你的项目依赖了一些 Npm 的模块,有些 Npm 模块会 Parcel 运行错误...反观 Webpack 除了用于构建网页,还可以做: 打包发布到 Npm 的库 构建 Node.js 应用 ( 同构应用 ) 构建 Electron 应用 构建离线应用 ( ServiceWorkers...输出 JS 文件大的原因在于: 不支持 TreeShaking 构建出的 JS出现了所有文件的名称 总结 当然了,现在估计还没有用于生产环境的parcel,先驱者回踩很多坑,parcel肯定也会在版本更新中解决自己的不足

2K10

Parcel Vs Webpack

; 对比他们的首次启动速度和监听变化时的构建速度; 在生成环境下需要压缩JSCSSCSS需要提取到单独到文件,并对比他们在生产环境下构建文件大小; 需要生成自动会加载对应资源的HTML文件Parcel...模块会Parcel运行错误Parcel需要为零配置付出代价 零配置其实是把各种常见的场景做为默认值来实现的,这虽然能节省很多工作量,快速上手,但这同时会带来一些问题: 不守规矩的node_module...例如: 无法控制对部分文件的特殊处理,以实现诸如按需加载这样的需求; 无法控制输出文件名的Hash值和名称; 无法控制构建输出目录结构; 无法映射路径以缩短导入语句; HTTP开发服务器不支持HistoryApi...3.17s 2.87s 生成环境输出JS文件大小 544K 274K 生成环境输出CSS文件大小 23K 23K 从以上数据可以看出:Parcel构建速度快,但Parcel输出文件大 导致Parcel...,而Webpack默认是单进程构建(Webpack也支持多进程); 导致Parcel输出JS文件大的原因在于: 不支持TreeShaking 构建出的JS出现了所有文件的名称,如图: ?

2.1K22
  • parcel 中小型项目打包工具

    Parcel 将自己标榜为“零配置”。 Parcel 内置了一个开发服务器,这个开发服务器能够在我们修改文件之时自动重新构建应用,为了加快开发,它还支持模块热替换。...Parcel 内置支持 JSCSS、HTML、文件资产等等,这不需要插件,对用户会更加友好; 零配置,内置了 code splitting、热模块加载、CSS 预处理、开发服务器、缓存等等; Parcel...当然我们可以在package.json文件里配置命令: ? 就可以使用npm run start构建了。...build方式 parcel build index.js 也可以加参数指定构建路径parcel build index.js -d build/output package.json文件里配置后可以使用...如果你是使用的全局安装的parcel-bundler,可能在构建vue项目出现上面的错误 问题很明确,找不到该模块,只需要执行npm i --save parcel-bundler在项目里安装后再parcel

    1.2K30

    关于Parcel你需要知道的所有内容:超快的Web应用打包器

    本文最初发布于 Medium freeCodeCamp 的博客站点,经原作者授权由 InfoQ 中文站翻译并分享。 什么?又有一个打包器(bundler)/ 构建工具?...Parcel 内置了一个开发服务器,这个开发服务器能够在我们修改文件之时自动重新构建应用,为了加快开发,它还支持模块热替换。 Parcel 的好处是什么?...Parcel 内置支持 JSCSS、HTML、文件资产等等,这不需要插件,对用户会更加友好; 零配置,内置了 code splitting、热模块加载、CSS 预处理、开发服务器、缓存等等; Parcel...在就绪之后,我们添加一些样式并在中导入: styles.scss index.js 生产环境的构建 我们需要添加一个脚本到中: 运行我们的构建脚本: 看到 Parcel 给我们带来多大的便利吗?...还可以通过下面的方式指定特定的构建路径React 搭建 React 环境非常简单,需要做的就是安装依赖并搭建: 的内容如下: 一切准备就绪,接下来见识一下它的威力,在继续下面的内容之前,请尝试编写我们的初始

    1.1K70

    正式发布一款可cmd命令安装的React.js项目脚手架——FastReactApp

    下面我将介绍FastReactApp几点特征: 对JSCSS、HTML、文件资产等的现成支持—不需要插件。...它使用工作进程来支持多核编译,并且有一个文件系统缓存,即使在重新启动后也可以快速重建。 现在生成树震动包的源映射,并在引用未知符号显示友好的错误消息。...查找文件夹 键入以下命令以获取NPM缓存路径: npm config get cache 获得路径后,在此_libvips这个文件夹,将符合你计算机环境的两个文件放入这个文件夹内。 至此大功告成。...发布项目 输入命令: npm run build 将用于生产的应用程序生成到buildDir文件夹。它在生产模式下正确地进行反应,并优化构建以获得最佳性能。构建被缩小,文件名包含哈希。...styled-components有以下几点:1、样式写在 js 文件里,降低 jscss 文件的依赖。2、样式可以使用变量,更加灵活。3、使用方便,不需要配置 webpack、开箱即用。

    1.5K20

    JavaScript 新一代构建工具对比

    无论我们在开发服务器使用 webpack、Rollup 还是 Parcel,工具都会从我们的源代码和 node_modules 文件夹中把我们的整个代码库打包在一起,通过构建过程运行这些代码,比如 Babel...为了进行正确的类型检查,你需要安装T ypeScript,并在你的 JavaScript 根文件运行 tsc --noEmit ,或者使用编辑器插件来观察类型错误。...然而,如果我们的应用按原样运行生产构建,Snowpack 会抛出一个错误。这是因为它需要知道在构建要使用哪个版本的 React 和 ReactDOM 。...为了 Snap Shot 应用正常运行,我需要深入研究node模块,并将一两个库转换为使用本地JavaScript模块语法。如果你使用的是旧库,这可能会拖慢你的速度。...,所以运行这个函数会出现错误

    1.8K10

    【前端必看】2017 年 JavaScript 全面崛起大运势

    与 Vue.js 相对应的,React 方面却依然处于碎片化的状态,开发者需要根据自身项目的情况,进行技术选型: 在页面间的路由切换问题; 如何获取数据; 如何把数据绑定到表单; 如何存储应用的状态;...一般情况下,在搭建自己的构建工作需要编译器可能有2个原因: 想享受到最新 JavaScript( ES7 标准) 的特性,并把它应用到尽可能多的浏览器中。...构建工具 构建工具分类中的排行冠军是 Parcel,这或许是今年最大的惊喜,作为一个 8 月份才在 GitHub 发布的新项目却已达到 14,000 个 star 的关注度。...即使不安装任何插件,你也有一大堆开箱即用的功能: Git 集成功能; 自动补全: JavaScript 语法,当你想 require 或 import 一个模块能对本地文件路径进行补全,NPM 包名字...静态网站生成器 静态网站生成器(SSG,Static Site Generator)是指能够生成一坨 HTML、CSSJS 文件,方便你快速部署到 WEB 服务器而不需要安装和配置数据库的工具。

    2.7K50

    轻量级工具Vite到底牛在哪, 一文全知道

    背景与工作方式 在过去Webpack、Rollup 等构建工具作为主场明星,我们的代码都是基于ES Module 规范去写的。...这些工具在进行本地调试的时候会把模块预先打包成浏览器可读的js bundle格式,为了进行这一过程的优化,就出现了懒加载这种方式,但懒加载并不能解决构建的问题,Webpack依旧需要提前构建异步路由需要的模块...之后进入项目文件夹并安装依赖项: cd vite-project npm install 然后,我们可以使用启动服务器 npm run dev 并在http:// localhost:3000 /查看我们的应用程序...当我们把文件重命名并添加一些TypeScript特定的语法后,所有文件都可以更好的进行编译。 使用CSS,有人会将其重命名为CSSstyle.scss,并添加一些特定于Sass的语法。...之后还会花更多的时间在修复错误,改善捆绑软件能够优化并缩短其构建时间。 相比之下,Vite能轻而易举地做到。测试者尝试设置了四个堆栈,并且几乎立即对其进行了一些自定义设置。

    4.1K40

    2018年1月份最热门的JavaScript开源项目

    功能特性如下: ● 极速打包 - 多核心编译,以及即使在重启后也能快速重建的文件系统缓存。 ● 无需安装插件,开箱即用,支持 JSCSS、HTML、file assets 等。...特性如下: ● Native DOM 支持:CSS, SVG, SVG 路径和 DOM 属性支持。...● 不受限制:自定义的回调可以你输出到任何 API ● Power anything:使用 jQuery, Canvas, Three.js, WebSockets 等. ● 无缝交互:输入、动画及物理之间快速的切换...● Node 支持:可在服务器运行,或者运行在 IoT 的 Arduino ● 开放的 rAF loop:可以在核心 requestAnimationFrame 循环里运行任何进程 十一、JavaScript...目标如下: ● 无需重载页面转换 ● 热重载编辑 ● 为构建静态网站创建 React.js 组件模型和生态系统 ● 直观的基于目录的 URLs ● 支持 "Starters"

    2.1K80

    Next.js 13提供新的实验性特性,实现App“动态无限制”

    Next.js 团队在最近的主题演讲中解释了 Next.js 最新版本背后的逻辑: Next.js 最初是一个用于构建动态服务器端渲染网站的 React 框架。...在设计 Next.js ,我们没有针对单页应用进行优化,而是考虑帮助开发团队构建复杂的应用程序。但是,动态总是伴随着许多限制。...与之前的 Parcel 一样,Turbopack 可以增量构建和捆绑源文件。Next.js 团队宣称: Turbopack 只打包开发所需的最小资产文件,因此启动速度非常快。...在同一个代码库中处理客户端 JS 和 Node 运行时已经有点麻烦了,但在旧范式中,至少两端之间只有一个交互点(getServerSideProps/getStaticProps),而现在可以出现在每个组件边界...因此,当你尝试在 beta 版的文档中搜索如何使用新的 /app 文件夹和构建 Next.js 应用程序的新方法,你会发现许多关于特性仍然缺失、未完成、可能发生变更等警告和注释。

    2.3K20

    Parcel 2 + Vue 3】从0到1搭建一款极快,零配置的Vue3项目构建工具

    前言 一周间,没见了,大家有没有想我啊!哈哈!我知道肯定会有的。言归正传,我们切入正题。一篇文章中我主要介绍了使用Vite2+Vue3+Ts如何更快的入手项目。...Parcel使用工作进程来启用多核编译,并且有一个文件系统缓存,即使在重新启动后也可以快速重建。 Parcel提供了对JSCSS、HTML、文件资产等的现成支持—不需要插件。...您可以为不同的环境,服务器的Web或应用程序构建代码。您甚至可以一次建立多个目标,并在进行更改时实时更新它们。包裹快速且可预测。它在worker内部并行隔离地编译所有文件,并在运行时将所有文件缓存。.../index.js"> index.js import React from "react"; import { render } from "react-dom...查找文件夹 键入以下命令以获取NPM缓存路径。 npm config get cache 获取路径后,在该路径下找到_libvips该文件夹,将上述两个文件放入该文件夹中并重新启动安装命令。

    1.3K30

    新一代构建工具的比较

    为了进行正确的类型检查,需要安装 TypeScript 并在根 JavaScript 文件运行 tsc-- noEmit,或者使用编辑器插件来检查类型错误。 好的,让我们来看看每个工具。...然而,如果我们的应用程序按原样运行并运行一个生产版本,Snowpack 会抛出一个错误。这是因为它需要知道在构建使用 React 和 ReactDOM 的哪个版本。...当杰森 · 米勒作为嘉宾出现JS Party 播客,他解释了先生背后的想法: Preact 很小,如果你想做一个轻量级的项目,它真的很好。我们的工具在哪里?...import { React, ReactDOM,} from 'es-react'; 这意味着我们实际不使用正常的反应包你可能会习惯,而是拉在反应从 es-反应。...为了 Snap Shot 应用程序正常工作,我需要深入到节点模块中,并转换一两个库来使用本地 JavaScript 模块语法。如果您使用较旧的库,这可能会降低您的速度。

    2.3K20

    89.精读《如何编译前端项目与组件》

    1 引言 说到前端编译方案,也就是如何打包项目,如何编译组件,可选方案有很多,比如: 通过 webpack / parcel / gulp 构建项目。...gulp 理论可以将 babel、webpack、parcel 作为插件,但这是后来的事。...历史上由于 gulp 是作为 grunt 的替代品出现,当时要解决的问题是处理浏览器兼容问题,打包 scss 或 less,做一些公共资源替换,雪碧图等,最后可以顺带合并到一个文件,但模块化功能远远比...要解决这个问题,笔者介绍一种基于 webpack 的通用构建方案,本地调试、CDN 打包、ES6 -> ES3 转换 都使用统一套配置代码,同一套 loader。...为了支持这几个特性对如上代码做调试、项目发布、组件发布,我们分别看下这三个场景该如何配置编译脚本。 本地调试 本地调试是不用区分组件与项目的。

    1K20

    初学Node.js并部署到好雨云

    网站的错误不经常发生,但当我们遇到的时候非常令人懊恼,比如当我们想要在线挂号的时候,遇到了这个: 为什么会出现这种情况,背后的服务器发生了什么?...我们将使用Node.js做一个简单的web服务器并利用好雨应用管理平台将我们本地的服务放到互联网上面。 Node.js是一个开源的跨平台运行环境,允许我们构建一个服务器端和网络应用的运行环境。...node server.js 这样我们的web服务器就已经运行了,打开浏览器让我们确认一下它正常工作了。...接着我们需要为web服务器增加一些功能来处理不同的请求,send404是当请求到不存在的文件,我们要如何处理: function send404(response) { response.writeHead...总结 我们写了不到60行代码,将我们的web服务器构建了起来,并写了一个演示用的博客页面,也许你会说这太简单了,没错,确实是这样,但通过这些你可以快速的了解到web服务器如何工作

    95361

    新一代构建工具(1):对比rollupparcelesbuild—esbuild脱颖而出

    将你所有的资源打包:Parcel 具备开箱即用的对 JS, CSS, HTML, 文件 及更多的支持,而且不需要插件。...新建 index.html、index.js 和 index.css,然后 parcel index.html,就能拿到可运行的 html、jscss 组合。...而在 webpack 中,只有 JS 是一等公民(webpack@4 会增加 CSS 为一等公民),所以必须是以 JS 为入口去组织其他文件,这很别扭。...Snowpack的理念是减少或避免整个bundle的打包,每次保存单个文件,传统的JavaScript构建工具(例如Webpack和Parcel)都需要重新构建和重新打包应用程序的整个bundle。...文件更改时,Snowpack会重新构建该单个文件。在重新构建每次变更没有任何的时间浪费,只需要在浏览器中进行HMR更新。Snowpack 拥有美观的官方文件包含搭配其他框架的设定说明和专案样版。

    2.6K20

    2018前端最值得关注的技术有哪些?

    parcel号称零配置,多核打包,并且使用文件缓存,在时间比webpack快了将近10倍!...因为react的组件结构,要求把html,css,javascript写在一起。很多开发者对css in js不适应甚至反对。那么在新的2018年,是否还是继续的争议下去?...参考资料 CSS in JS 简介 精读《请停止 css-in-js 的行为》 大家对CSS in JS怎么看?...grunt 在gulp发布,grunt的地位就已经很受影响了,现在又有打包工具代替了自动构建工具的部分工具,就显得自动构建工具的作用不如以前了,更别说市场有一个更好的构建工具了--gulp。...sea.js sea.js由国人开发,当时使用的时候还满心欢喜,终于有国人的东西登上舞台了。sea.js凭借简单,轻量等优势火极一

    1.1K20

    2018 最值得关注的前端技术

    parcel号称零配置,多核打包,并且使用文件缓存,在时间比webpack快了将近10倍! ?...因为react的组件结构,要求把html,css,javascript写在一起。很多开发者对css in js不适应甚至反对。那么在新的2018年,是否还是继续的争议下去?...参考资料 CSS in JS 简介 精读《请停止 css-in-js 的行为》 大家对CSS in JS怎么看?...grunt 在gulp发布,grunt的地址就已经很受影响了,现在又有打包工具代替了自动构建工具的部分工具,就显得自动构建工具的作用不如以前了,更别说市场有一个更好的构建工具了--gulp。...sea.js sea.js由国人开发,当时使用的时候还满心欢喜,终于有国人的东西登上舞台了。sea.js凭借简单,轻量等优势火极一

    1.1K31

    推荐一个零配置开箱即用的ReactVue应用自动化构建脚手架,不强大你来找我

    测试环境和生产环境三种模式,每种模式对应不同的构建配置和优化方案 「监听端口」:使用开发模式,启动本地服务器并监听指定端口,可自动打开浏览器访问页面 「局部刷新」:启用Webpack内置Hot Module...Replacement,配合react-hot-loader或vue-loader增量更新css文件js文件,修哪更哪,无需刷新页面即可实时预览修改结果,并保存当前数据状态 「判断入口」:快速扫描项目指定的入口文件路径...,统一规范团队协作中每位同事的代码编写风格,减少代码冗余,在保证代码语法正确的前提下提高代码的可读性 CSS校验:内置stylelint,配置标准的CSS语法规则,检查和纠正出现的语法错误 JS校验:内置...,可在钩子函数上编写上传到服务器的代码用于构建后将文件上传到服务器,还可进行其他操作 「定制配置」:当部分配置不符合项目需求,可通过项目根目录下的配置文件brucerc.js修改默认配置,构建启动就会使用该配置文件覆盖默认构建配置...开发无需关注如何写好构建代码和使用何种工具扩展构建功能,只需专注于业务代码的编写,整个项目只存在业务代码,可通过配置文件修改默认构建配置,大大缩减项目前期的准备工作,保证项目的「简洁性」、「独立性」、

    1.8K30
    领券