使用webpack打包的后，公共请求路径的配置问题

最新推荐文章于 2024-08-03 14:18:56 发布
最新推荐文章于 2024-08-03 14:18:56 发布
阅读量1w 收藏 3
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/huantuo4908/article/details/70243586
版权
本文讲述了在webpack打包React项目时遇到的公共请求路径配置问题。原本的公共路径定义在public.js中，导致每次修改都需要重新打包所有组件。为了解决这个问题，作者提出创建一个config.json文件存放公共路径，避免webpack打包，并在public.js中引用该配置，使得修改公共路径变得更方便。同时，由于读取json文件需同步进行，因此在$.ajax调用时需将async设置为false。
摘要由CSDN通过智能技术生成

在我们公司，和后台接接口时，公共的请求路径我们是单独抽出来的，放在一个独立的public.js中，在public.js中存入那个公共变量

公共变量是这样

在其他地方使用ajax时，我们就这样使用

这种用法在平时的项目中是没有问题的。但是因为公司最近的项目都是用react来用，然后用webpack来打包。

webpack打包后，public这个js也被打包进了每个组件中去。如果需要修改的话，要么就在react打包后的每个js文件中修改，要么就是在public.js中修改你的公共

路径，然后再打包一次。这样会显得很麻烦。

 

解决方法就是创建一个config.json文件，并将其放在根目录下，因为webpack不会将你的json文件也打包进去，然后再config.json中写

1
2
3
{
最低0.47元/天 解锁文章
huantuo4908
关注
关于__webpack_public_path__的一些思考
哎咿呀
05-09 3136
前言：产品里有个困扰很久的bug，某处图片引用使用的require('xxxx')的方式，线上环境没问题，图片正常加载显示。当被第三方引用后，发现图片不能加载，引用路径上出现protocol:host:port/path/NANimg/xxxx.png的奇怪信息。 问题与webpack的publicPath配置有关系，conf文件中使用url-loader ...
【原】使用webpack打包的后，公共请求路径的配置问题
weixin_34356310的博客
12-08 569
在我们公司，和后台接接口时，公共的请求路径我们是单独抽出来的，放在一个独立的public.js中，在public.js中存入那个公共变量 公共变量是这样 在其他地方使用ajax时，我们就这样使用 这种用法在平时的项目中是没有问题的。但是因为公司最近的项目都是用react来用，然后用webpack来打包。 webpack打包后，public这个js也被打包进了每个组件中去。如果需...
webpack/vite打包中publicPath(base) router.base axios.baseURL参数作用
最新发布
qq_42152032的博客
08-03 1036
这句配置的意思就是，拿到一个地址，先根据地址尝试找对应文件，找不到再试探地址对应的文件夹，再找不到就返回rewrite /index.html的结果(即/lbsmart.public/project/hx.con/index.html文件)。即从/lbsmart.public/project/hx.con/index.html 这个路径加载index.html资源文件并返回。打包后的chunk.js、chunk.css等资源都会加前缀路径(/project/hx.con/chunk.js)
配置 webpack的打包路径
热门推荐
weixin_39090097的博客
07-27 1万+
  在 src 目录下面 新建一个 webpack.config.js 文件  按照图示 设置 需要打包的文件 ，配置打包后输出到哪个文件及路径  配置完成以后，直接在终端 输入 webpack 就会实现自动打包，小伙伴赶紧动手试一下 如果说 我们想要 我们一修改文件，不用我们手动打包，就想让我们 修改的文件生效 1、可以在 package.json 文件中配置 dev: webpa...
webpack打包vue项目后，一些文件图片路径找不到的问题解决办法
王永存
09-23 9173
最近写了一个百度地图的项目，要求底部有一个导航栏。具体如下图： 首先，拿到了底部导航栏的所有图标图片，图片都有两种。灰色的代表未选中，选中的用带样色的图片替换。 先看一下，组件中 html结构：通过vue提供的v-for方法，进行遍历显示footNav这个数组。数组里边存放着{title:"银行"，url:" "，url1:" "}，将图片的 src与isSel
react设置基础路由、修改打包路径
qq_35629054的博客
07-02 2537
设置基础路由 1.基础路由设置使用了 basename import React from 'react' import { BrowserRouter as Router, Route, Switch, Redirect } from 'react-router-dom' import * as Login from '@pages/login' <Router basename = "/test"> <Switch> <Redir
webpack配置打包后图片路径出错的解决
08-27
在Webpack配置打包后图片路径出错的问题可以通过修改url-loader的配置或使用vueLoaderConfig里的cssLoaders方法来解决。这些方法可以帮助你解决图片路径出错的问题，提高项目的加载速度和用户体验。
解决vue+webpack打包路径的问题
08-27
然而，在实际部署过程中，可能会遇到Vue和Webpack打包路径的问题，导致应用无法正常运行。本文将详细介绍如何解决Vue+Webpack打包路径的问题。 首先，理解问题的核心在于Vue Router的history模式。在history模式下...
webpack打包node.js后端项目的方法
10-18
本文将详细介绍如何利用Webpack打包Node.js后端项目，包括必要的安装、配置步骤以及一个简单项目目录的构成。 知识点一：Webpack基础 Webpack可以看作是一个现代JavaScript应用程序的静态模块打包器。它在运行时...
学习webpack的基本配置和splitChunks配置
Czuaphe的博客
06-30 907
学习webpack的基本配置和splitChunks配置与模块的同步异步导入 文章目录学习webpack的基本配置和splitChunks配置与模块的同步异步导入entry 入口配置output 出口配置处理vue文件处理CSS文件配置文件压缩公共库代码分离参数chunks entry 入口配置 entry表示入口，一般是一个字符串，表示入口文件的路径。如果是多入口就需要将entry变成一个对象，属性名就是每个入口的名字，值是每个入口的路径。 // 单入口 entry: './src/main.js' //
webpack学习教程之publicPath路径问题详解
12-08
本文主要给大家介绍了关于webpack中publicPath路径问题的相关内容，分享出来供大家参考学习，下面来看看详细的介绍： output: { filename: "[name].js", path:path.resolve(__dirname,"build") } 如果没有指定pubicPath,则引入路径如下 <body> [removed][removed] </body> 如果有指定publicPath output: { filename: "[name].js", path:path.resolve(__dirname,"build
vue webpack打包之后 重新修改配置文件接口API路径,无需修改代码后再打包
m0_49471668的博客
06-17 1545
用vue-cli构建的项目通常是采用前后端分离的开发模式，也就是前端与后台完全分离，此时就需要将后台接口地址打包进项目中，但是有的时候需要修改接口地址，为了避免为了修改接口地址而进行修改代码后再重新打包的繁琐，解决呢方法很多，推荐一种最便捷的方法，也是最容易操作的方法，亲测有用！1.首先我们在public目录下的static文件下建立一个config.js文件，内容如下： 2.接下来我们在public目录下的index.html这个入口文件里引入该文件（注意路径） 3.然后就可以在需要的地方随意获取
【关于webpack中的publicPath】
qmy960502的博客
01-12 2818
说道说道webpack的publicPath
webpack学习
banqiaoxian4609的博客
06-28 223
贴出项目中webpack相关配置，逐个解析 1. 生产环境配置 webpack.config.prod.js var autoprefixer = require('autoprefixer'); var webpack = require('webpack'); var HtmlWebpackPlugin = require('html-webpack-plugin'); var Ex...
webpack教程
大灰狼的小绵羊哥哥的博客
09-17 1125
1. 导语 1.1 什么叫做webpack webpack is a module bundler. webpack takes modules with dependencies and generates static assets representing those modules. 简单的概括就是：webpack是一个模块打包工具，处理模块之间的依赖同时生成对
react webpack配置 paths.js
qq_36262295的博客
02-23 963
'use strict'; const path = require('path'); const fs = require('fs'); const getPublicUrlOrPath = require('react-dev-utils/getPublicUrlOrPath'); //项目根目录 const appDirectory = fs.realpathSync(process.cwd()); //生成绝对路径 const resolveApp = relativePath => pa
React项目创建并打包到云服务器指定端口
哼哼哈嘿的博客
06-05 663
1.输入命令npm run build打包react工程文件，完成后会生成一个如下图所示的build文件夹 2.将build文件放到服务器中 3.在nginx目录下新建一个vhost文件夹，文件夹下新建一个example.conf文件 server { listen 5000; //你所需要打开的端口 server_name （你的ip）; //你的IP地址 root /www/server/nginx/user/my-react/build; //build文件的地址
前端开发必备技能知识笔记-添加webpack打包后可以配置的文件
花姐夫JUN的博客
12-17 1023
我在arcgis api for js地图开发完成后，打包给运维去业主单位部署的时候，常常需要让我更改图层服务的链接再打包好传给他们调试，运维和我都很烦，也常常打断我撸代码。后面直接将可能需要频繁修改的参数集中到一个配置文件中，打包后运维也能在打包文件中找到配置文件进行修改。步骤：添加配置文件（不能用ts文件）public文件夹中添加配置文件LayersConfig.jslet gra...
webpack 打包css背景图片路径处理
05-16
为了解决Webpack打包CSS背景图片路径引用问题，我们可以采取以下几种方式： 1. 直接使用相对路径 我们可以使用相对路径来引用背景图片。比如，如果我们的 CSS 文件和图片文件在同一个目录下，那么可以直接使用相对...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值