如何避免在创建React App项目中使用非常长的路径并使用绝对路径？
在创建React App项目中，避免使用非常长的路径并使用绝对路径的方法是使用Webpack的alias配置。通过配置alias，可以将长路径映射为短路径，从而简化引入组件、模块和文件的过程。
以下是具体的步骤：
- 打开React App项目的根目录，找到webpack.config.js文件（如果没有该文件，则需要先安装并配置Webpack）。
- 在webpack.config.js文件中，找到resolve.alias字段，如果没有则需要手动添加。
- 在resolve.alias中添加键值对，键为你想要的短路径，值为对应的长路径。例如，如果你想将长路径src/components替换为短路径@components，可以添加如下配置：
resolve: {
alias: {
'@components': path.resolve(__dirname, 'src/components')
}
}- 保存文件并重新启动React App项目。
现在，你可以在项目中使用短路径@components来引入src/components目录下的组件，而不需要使用长路径。
这种方法的优势是可以提高代码的可读性和可维护性，尤其在大型项目中特别有用。此外，使用短路径还可以减少输入错误和路径拼写错误的可能性。
推荐的腾讯云相关产品：腾讯云云服务器（CVM）和腾讯云对象存储（COS）。
相关·内容
1回答
我试图用Intellij在我的项目中创建一个符号链接，我想将index.html从我的react文件夹链接到我的模板文件夹中。我正在使用以下命令：
ln -s react-app/build/index.html site/src/ratpack/templates/index.html
然而，当我运行gradle构建时，我得到了错误
无法列出/home/xxx/dev/football/site/src/ratpack/templates/index.html的内容不能遵循符号链接
我是不是搞错了这个符号链接？我正在从我的项目的根运行这个命令。
浏览 1提问于2017-02-09得票数 3
回答已采纳
第二个编辑:当我试图在函数中引用Types时，它就中断了，并要求进行相对导入(在此之前，它只是作为一个参数引用，这很好)。我尝试过很多解决绝对路径问题的方法。认为以下是问题的主要症结:绝对路径适用于导入 ts 文件的 js 文件、导入 js 文件的 js文件和导入<code>E 126</代码>导入<代码>E 227</代码> js </代码>E 131</code>文件的<code>E 222</code> ts >E 126</code>文件，导入ts ts files.的 而
浏览 14提问于2022-11-15得票数 1
我刚刚用React Native Typescript模板创建了一个新项目。但我发现，当我导入一个新组件时，它抛出了以下错误。我的新组件位于src/screens/HomeScreen.tsx内部 error: Error: Unable to resolve module `src/screens/HomeScreen` from `App.tsx`: src/screens/HomeScreen could not be found within the project. 如果我在App.tsx中内联相同的组件，那么它工作得很好。但是从另一个文件导入会导致此问题。我尝试删除并重新创建该问
浏览 50提问于2020-07-25得票数 0
回答已采纳
1回答
我创建了具有创建-反应-应用程序的react，并且我无法添加别名来解析位于node _node/ app webpack.config.js中的webpack.config.js别名节点-脚本/配置:模块未找到:无法解析'c:\my-app\src\app‘中的“@/_components”。
alias: {
'@': path.resolve(__dirname, 'src/'),
可能错过了一些简单的..。这是webpack博士：
浏览 1提问于2020-06-24得票数 1
回答已采纳
1回答
我使用react-router开发我的项目。
下面是我的代码。
const App2 = React.createClass({
render() {
return (
<div>
<Link to="index">index</Link>
<Link to="favorite">favorite</Link>
<Link to="myPage&#
浏览 1提问于2016-07-07得票数 4
我在app/components/中定义了一些反应组件。我在webpack里设置了这样的化名：
//webpack.conf.js
module.exports = {
entry: './app/app.jsx',
output: {
path: __dirname,
filename: './public/bundle.js'
},
resolve: {
root: __dirname,
alias: {
Main: 'app/co
浏览 2提问于2016-07-15得票数 1
回答已采纳
1回答
我遵循了这个指南，在我的项目中建立了绝对进口。对Lekhnath的第三个评论是这样做的：发现自己能够做到这一点：
import { AppActions } from 'src/BL/redux/types/app-actions.types';
确实起作用了。然而，这并不是：
import { startLoading, stopLoading } from 'src/BL/redux/action-creators/app-action-creators';
我必须指出，导入是很好的，它甚至可以自动完成我和所有的东西，但是当我在这个组件中运行它时，它会失败，
浏览 6提问于2020-05-18得票数 0
回答已采纳
有以下反应(15.0.2)的例子
组件
import React from 'react';
class Test extends React.Component {
render() {
return <div> Test </div>;
}
}
export default Test;
试着呈现出
import React from 'react';
import ReactDOM from 'react-dom';
import Test from './component
浏览 3提问于2016-05-08得票数 2
回答已采纳
我用create-react-app my-app --typescript创建了react。 然后我在本地安装了typescript模块。 ../typescript-module/A.ts export default class A {
} App.ts import A from 'typescript-module/A';
console.log(A); 我尝试将typescript模块导入到我的react应用程序中。但它会显示错误，如under。 ./node_modules/typescript-module/A.ts
Module parse failed:
浏览 18提问于2019-10-19得票数 1
有人能解释一下为什么：
import React from '../node_modules/react';
与以下相同：
import React from 'react';
这是：
import './App.css';
与以下情况不同：
import 'App.css'; or import 'App.css';
在后面的示例中，我收到一条消息，即在src目录中找不到文件App.css，但它就在那里。
浏览 2提问于2019-12-18得票数 2
回答已采纳
我尝试在react中加载基于动态路径的图像，但结果是下面的错误Cannot find module <path>
下面的代码运行正常
const TestImage = () => {
return (
<div className="image-wrapper">
<img src={require('./../../../assets/images/guy-holding-pencil.jpg')} />
</div>
);
};
我将动态部分分解为使用一个不起作用的变
浏览 4提问于2018-12-11得票数 0
1回答
我正在做一个使用React的项目。这是我的项目的文件结构
公共index.html
App.jsimages facebook.pngimage.PNGlinkedin.pngprofile.pngtwitter.png src
- Profile Intro
- profileIntro.js
- data
- data.js
在我的App.js中，我将导入data.js文件并将从中获得的数据传递给子组件profileIntro，js作为支柱。
这里是data.js
const user = [
{
id: 1,
name: &#
浏览 1提问于2020-10-11得票数 0
1回答
我正在创建一个应用程序，需要多层次的嵌套。从3级开始，我的路线没有被认出来。
App JS
const App = () => {
return (
<React.Fragment>
<Router>
<Switch>
<Route path="/login">
<Login />
</Route>
<Route path="/">
浏览 3提问于2020-06-13得票数 0
回答已采纳
当我试图通过snack.expo在模拟器或设备上运行应用程序时，我会得到以下错误：
设备：(741:6637)未能安装模块项目_模块/容器/<%name%>：无法下载从app.js导入的模块“app.js”
<%name%>可以在不同的屏幕之间进行更改，所有这些都来自目录project/containers/ Code：
App.js
import React from 'react';
import { createStackNavigator } from 'react-navigation';
import Aut
浏览 0提问于2018-06-09得票数 0
我已经上传了我的项目角度上的Stackblitz，该项目完美地工作在Visual代码上。
但是，当我在Stackblitz上打开项目时，我会收到一条错误消息：
Error in src/app/store/session/session.actions.ts (1:32)
Cannot find module 'src/app/services/session.response' or its corresponding type declarations.
我打开了session.action.ts文件：
import { SessionReponse } from "
浏览 1提问于2021-12-29得票数 2
回答已采纳
1回答
我使用TypeScript有一个新的ReactiveNative0.61.1项目。它用来完美地显示新项目欢迎屏幕。我添加了一个类，试图导入它(它甚至是自动完成的)，但是它说找不到组件。
下面是我的tsconfig.json (所有的代码都在我的src文件夹中，它位于我的项目根目录中)：
{
"compilerOptions": {
// Target latest version of ECMAScript.
"target": "esnext",
// Search under node_module
浏览 4提问于2019-10-03得票数 14
回答已采纳
1回答
我在制作一个电影应用程序。
因此，我正在Genre中获取一个类型列表。基于类型id，我正在创建一个新的路径来呈现MoviesFromGenre中的电影列表。使用电影的id，当我单击一个Movie组件时，我将创建一个到MovieDetails组件的新路径。这部分起作用了。
当我单击主页上的Movie组件时，问题就出现了。我正在MoviesFromType中获取流行电影的列表，但当我单击Movie组件时，路由路径不起作用。我想让它转到MovieDetails path ( /:genreId/:movieId )，而不是放在/:movieId上，并显示MoviesFromGenre中的内容。
所以
浏览 2提问于2022-04-06得票数 1
回答已采纳
我使用命令行为react创建一个新项目：
npx create-react-app templatereact
..。好了，这是为我创建一个‘模板’项目和下载130MB文件现在当我想创建一个新项目与‘创建-反应-应用程序’我应该一次又一次地下载130MB，如果我没有互联网我不能创建新项目与‘创建-反应-应用程序’为此原因我想创建一个新项目从‘模板’为此我复制了整个文件夹‘模板’到新的地方，并将其重命名为'myreact‘文件夹，在package.json中我从“名称”：“模板”，改为“名称”："myreact"，。现在，当我运行'npm start‘时，我会给出
浏览 19提问于2020-02-10得票数 0
我已经创建了一个非常基本的ReactJs组件。
我创建了一个html文件。代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="I`enter code here`SO-8859-1">
<title>Basics of React</title>
</head>
<body>
<div id="example"></div>
<script src=&
浏览 2提问于2016-04-07得票数 1
回答已采纳
2回答
我正在准备我的第一次试镜。由于某些原因，它在其他计算机上工作，但我的除外。
Im使用VScode
一旦打开编辑器，就会收到以下消息:无法读取配置文件：/Users/user/Documents/repos/project/C:/mydirectory/.eslintrc.json Error: ENOENT: no such file or directory, open Source: ESLint (Extension)
.eslintrc.json在我的根目录上。
这是我的配置文件：
{
"parser": "babel-eslint",
浏览 1提问于2018-07-31得票数 13
回答已采纳
我正在react应用程序中加载SVG。SVG引用外部样式表。 如果我将SVG从JSX移到index.html中，SVG将使用定义的css类。 如果我使用诸如react-svg之类的库，svg将在JSX中加载外部css类。 为什么在JSX中使用SVG时，SVG不加载外部CSS？ import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import ReactSVG from 'react-svg'
浏览 57提问于2019-04-17得票数 0
1回答
我的问题部分是技术性的，部分是关于部署策略和工作流程的。我使用Require构建了一个项目。它包括许多不同的js模块，并建立在Kirby CMS的基础上。该项目的目录结构如下所示：
project
assets
styles
style.css
js
scripts
script1.js
script2.js
script3.js
vendor
app.js
images
fonts
content
.
浏览 5提问于2014-03-23得票数 2
回答已采纳
通过遵循，我创建了一个go lang项目，并通过Visual Studio Code打开了它。
代码本身工作良好我可以运行服务器，但不知何故VS代码显示
cannot find package "appengine" in any of:
/usr/local/Cellar/go/1.8.3/libexec/src/appengine (from $GOROOT)
/Users/ironsand/go/src/appengine (from $GOPATH)
我认为我必须为Google App Engine设置GOROOT，但根据的说法，我不应该这样做。
如何让
浏览 0提问于2017-09-13得票数 10
当我点击包含url products/new的链接时，我可以访问新的产品页面，它工作得很好，但如果我刷新页面，它将返回Uncaught SyntaxError: Unexpected token <。
我该如何解决这个问题？
页面产品新闻
import React from 'react';
class ProductNew extends React.Component {
constructor(props) {
super(props);
}
render(){
return (
<div>
&l
浏览 5提问于2015-12-03得票数 6
2回答
当我设置并通过路由进行更改时，路由就会继续添加Infront。
示例：-如果我在http://localhost:3001/login页面上，并单击“注册链接”，则在前面添加register路由，如==> http://localhost:3001/login/register
有人能告诉我我做错了什么吗？
码
App.js
import "./App.scss";
import { Routes, Switch, Route } from "react-router-dom";
import Home from "./components/Ho
浏览 4提问于2022-07-02得票数 1
回答已采纳
我正在编写一个反应教程，在启动Webpack服务器时遇到了问题。在运行npm start时，我得到以下错误：
无效配置对象。Webpack已经使用一个与API模式不匹配的配置对象进行初始化。- configuration.output.path:提供的值"./“不是绝对路径！
这是我的目录结构：
reactApp
+ node_modules
+ App.jsx
+ index.html
+ main.js
+ package.json
+ webpack.comfig.js
我的webpack配置
var config = {
entry: &#
浏览 2提问于2017-05-08得票数 1
回答已采纳
我试图在我的react和redux应用程序中做出路由选择，但仍然没有运气。
index.js：
import React from 'react';
import { render } from 'react-dom';
import { Router, Route, IndexRoute } from 'react-router';
import { Provider } from 'react-redux';
import { createHistory } from 'history';
import Da
浏览 3提问于2015-10-14得票数 3
回答已采纳
2回答
全部：
我是Express.js的新手，当我使用Multer ()处理文件上传时，我指定了一个multer中间件对象：
var upload = multer({dest: 'uploads/'});
但是有一件事让我很困惑:不管我把这行代码放在哪里(不管是在子路由器文件中还是在app.js中)，它总是在项目根目录下创建“上传”文件夹(与app.js、视图、路由、公共的文件夹相同)。)，即使我将其更改为“./上载/”，它仍然在项目根下创建上载文件夹。
这让我非常困惑，因为当我将它与require()函数进行比较时，必需()似乎使用了基于调用位置的相对路径，而multer不是吗？
浏览 0提问于2015-08-26得票数 2
回答已采纳
在react-create-app项目上运行npm run build命令会在所有文件中创建一个build文件夹和一些默认路径，就像在映射文件中一样：
{"version":3,"sources":["../static/js/main.500cb0d9.js" ...
我是否可以更改build文件夹中的所有路径以匹配我的BE，如
{"version":3,"sources":["mywebsite/web/static/js/main.500cb0d9.js" ...
package.json：
浏览 0提问于2018-08-05得票数 9
回答已采纳
1回答
我已经用React和React路由器建立了一个项目。总体结构如下：
这是html页面。
<html lang="en">
<head>
<!-- other tags ... -->
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="root"></div>
</body>
</html>
这
浏览 5提问于2022-11-22得票数 1
回答已采纳
下面是我的App.js的代码片段，
return (
<div className="app">
<Router>
{!user ? (
<LoginScreen />
) : (
<Switch>
<Route path='./profile'>
<ProfileScreen />
</Route>
<Route exact path="/"&g
浏览 2提问于2022-01-14得票数 1
2回答
我正在编写下面的，并试图使导航栏中的相关链接正常工作。然而，当我点击关于我自己的时候，我得到了以下的回应，
Cannot GET /about
我正在处理的代码如下所示，
App.js
// This component handles the App template used on every page.
import React, {PropTypes} from 'react';
import Header from './common/Header';
import NavBar from './common/navbar';
imp
浏览 3提问于2017-02-13得票数 1
回答已采纳
2回答
我已经下载了一个包含以下package.json的react项目： {
"private": true,
"main": "src/index.js",
"dependencies": {
"@material-ui/core": "4.10.0",
"@material-ui/icons": "4.9.1",
"classnames": "2.2.6",
"history"
浏览 16提问于2021-02-01得票数 2
回答已采纳
我刚开始使用Flask和SQL，我尝试创建一个简单的前端界面来处理我的数据库，我使用peewee作为我的ORM。这是我的密码：
搜索(术语)：
items = Product.select().where(Product.name ==术语)
my_list = []
关于项目中的项目：
p_str = "Product: {}, Price: {}, Description: {}, Quantity in stock: {}".format(item.name,item.price, item.description, item.quant)
my_list.
浏览 6提问于2022-07-15得票数 -1
我的react应用程序在webpack-dev-server上运行得很好，但是生产构建重定向到页面没有找到路由。我也尝试过hashRouter，但它会重定向到每条路径上的主页。
请让我知道我错过了什么。我还是个新手。此外，我的构建包大小接近2MB。我尝试了一些代码拆分，但不起作用。
这是我的webpack.config.js-
var path = require('path')
var webpack = require('webpack')
var ExtractTextPlugin = require('extract-text-webpack-p
浏览 0提问于2017-10-31得票数 0
问候人们，
我在从文件中加载图像时遇到了一些麻烦。当我想在其他地方使用我的文件时，我使用“~/文件夹/文件”这样的相对路径，但是当我试图使用该方法创建一个图像时，就找不到了。由于我不愿意在每次发布之后使用绝对路径并相应地更改路径，在这种情况下，有人知道如何设置相对路径吗？
这些详细信息位于项目根目录中的凭单/目录中，但无法通过“~/凭单/spring.jpg.jpg”找到。
浏览 2提问于2019-12-03得票数 0
回答已采纳
1回答
我正在使用输入类型' file‘从我的机器上使用react应用程序浏览文件，在从本地选择文件之后，我想获得文件的绝对路径，例如:下面这样的C://something/something.png。所以我搜索了很多网站，所有的网站都告诉我们，从UI我们不能访问我们的机器！！ .Ok罚款，现在我的疑问是，那么我如何实现这一点。有人能在这件事上帮我吗？提前谢谢。
浏览 0提问于2018-07-23得票数 0
3回答
我正在使用React路由器导航到我的react应用程序中的不同页面。在我的页脚中，我有一个指向/about路径的链接。当我单击该链接时，我需要到localhost:3000/约。但是，当我再次单击它时，我需要到localhost:3000/约/约。我怎么才能避免这种情况？以下是我的路线：
function App() {
return (
<Router>
<Navbar />
<Routes>
<Route path="/" element={<Home />} />
浏览 1提问于2022-08-16得票数 1
1回答
过去，我曾用webpack来捆绑我的npm依赖关系，比如jquery、lodash等等。
我很难找到如何捆绑依赖项和我自己的脚本？
Loader.js：
require('expose?$!expose?jQuery!jquery');
require('lodash');
require('react');
require('slider-component.js'); // my component in app folder
滑块-组件.：
class Slider extends React.Component {
c
浏览 0提问于2016-08-17得票数 0
回答已采纳
1回答
我是react的新手&我正在尝试将本地图像添加到我的react应用程序中。这就是我目前所拥有的，<Image source={require("images/pic.jpeg")} />
但是我不明白为什么我会得到这个错误。
ERROR 00:24 Unable to resolve "images/pic.jpeg" from "App.js"
我还安装了Image组件，并创建了一个单独的图像文件夹。我使用的是iOS模拟器。
如果有人能帮我解决这个问题，那就太好了！提前感谢！
浏览 0提问于2020-10-03得票数 0
我试图在Azure上部署一个MERN应用程序(React.js作为客户端，Node.js作为服务器)。我创建了一个宇宙数据库帐户和数据库(MongoDB)，并将我的Node.js应用程序连接到该数据库。
我无法在我的Node.js和React.js应用程序之间创建通信。
我创建了React.js应用程序的React.js构建程序，并粘贴到Node.js应用程序中，并部署了Node.js应用程序。
我有问题了
“不能得到/”
我还尝试手动部署该应用程序，方法是在下面的结构中粘贴整个React.js应用程序ino Node.js应用程序--
|- node-app
|- client
浏览 2提问于2019-02-25得票数 0
1回答
我有使用react-router-dom的create-react-app。我还为SEO使用了快速的服务器端渲染。下面是我的简单的express配置。当我到达'/‘路由或任何第一级路由("/contact“、"/blog”等)时，它可以正常工作。静态文件是这样的：
"“。
但是当我导航到任何多级路由("/blog/blog-post-1")时，它会将第一个路由添加到静态文件URl ex：
我做错了什么？此外，文件夹结构是常规的Create-react-app的结构。我在build文件夹中提供我的index.html，在build/static中
浏览 14提问于2018-07-20得票数 0
回答已采纳
2回答
目前，我在我的应用程序中使用以下代码。
const {
Router,
Route,
IndexRoute,
Redirect,
Link,
IndexLink,
hashHistory
} = ReactRouter
var App = React.createClass({
render : function() {
return (
<div>
<h1>My Application</h1>
<div><Link to="/levelone/1
浏览 10提问于2017-01-17得票数 7
回答已采纳
1回答
在这里，我正在构建一个网站，我正在使用react-router-dom，当我在每个页面中使用Navbar和Footer组件时，一切看起来都很好。因此，我想出了一个想法，将组件包装在一个包含Navbar和Footer的包装器中。
当我单击Link或NavLink时，它似乎工作得很好，但是当我再次单击导航栏中的相同或另一个链接时，它将导航到前面所选路径下的子路径。像这样
一次点击：
http://localhost:3000/projects
再次单击相同的链接：
http://localhost:3000/projects/projects
App.js
import './App.cs
浏览 8提问于2022-06-28得票数 2
以下内容不起作用: React路由器"Link“不工作。
假设我们处于起点：“localhost:3000/api/page”。
当我单击下拉项目时，链接是：“localhost:3000/api/page/api/page/abc”。
它应该是："localhost:3000/api/pages/abc".
我在控制台中没有显示错误，但是它没有达到所需的行为。它没有重定向到正确的页面。
**当我通过输入URL进入正确的页面时，它是空的。
但是，在测试页面时，当我没有使用任何Reactive路由器路由时，页面运行良好，所以我认为问题在于路由**。
import { L
浏览 2提问于2021-06-07得票数 0
回答已采纳
我尝试在我的asp.net mvc5项目TypeScript中使用。我创建了jquery.TypeScript.DefinitelyTyped.文件并安装了nuget包app.tsapp.ts代码：
/// <reference path="typings/jquery/jquery.d.ts"/>
class TestClass {
test(): void {
alert("Taras TS");
}
}
window.onload = () => {
var tcs: TestClass = n
浏览 3提问于2015-10-28得票数 0
回答已采纳
我们的项目是使用webpack resolve.root选项导入具有绝对路径的模块。(避免类似于../../../module的事情)
在目前的状态下，该项目正在使用babel-加载程序，它的工作非常好。
我的任务是将应用程序迁移到角2。
为此，我目前正处于向TypeScript过渡的过程中。
不知何故，the似乎无法与webpack配置的resolve.root选项结合使用。
webpack.config.js示例
resolve: {
root: [
path.resolve('./node_modules'),
path.resol
浏览 1提问于2016-07-01得票数 9
回答已采纳
1回答
在我的django 10项目中，我有以下目录结构：
/my-project/ # project dir
+app1
+templates
+admin
base.html
404.html
500.html
我的模板属性在设置中如下所示：
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [
浏览 17提问于2016-08-17得票数 0
回答已采纳
我正在构建一个简单的烧瓶应用程序，其中文件结构是
app.pytemplates/static/ 项目/ css/ style.css
- js/
- code.js
有了这个结构，下面的代码就可以工作得很好。
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def root():
return(render_template('html/index.html'))
if(__name__ == '__main_
浏览 3提问于2020-08-29得票数 0
回答已采纳
我试图修改我的nodeJS api。请查看以下文件：
.\package.json
{
"name": "test-api",
"version": "1.0.0",
"description": "TBD",
"scripts": {
"start": "node ./bin/www"
},
"keywords": [
"test",
"API"
],
浏览 0提问于2018-07-05得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
