vue+vite项目打包生成可以后端修改url ip的相关配置与使用方式

最新推荐文章于 2024-05-16 17:23:56 发布
最新推荐文章于 2024-05-16 17:23:56 发布
阅读量2.6k 收藏 2
点赞数 3
文章标签： 前端 typescript vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43572283/article/details/127403243
版权

vue项目npm run build打包后会生成一个dist文件，我们有时候需要一个配置文件来更改所有请求ip地址，如果没有这个配置文件，我们就需要每次在项目代码中更改，然后再打包，这样就很麻烦，所以可以选择用一个配置文件来更改打包后的url，方法步骤如下：

（以一个需求为例：判断用户是否登录，如果未登录则提示登录并跳转网址，在开发环境和生产环境分别跳转不同的外部链接）

1.在publice中配置路径

 2.在要使用的页面引入axios直接使用

 3.就OK啦进入测试

Hazel_gy
关注
  • 3
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化
05-12
vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+...
vue3vite打包后更改接口地址
weixin_63438333的博客
09-06 1383
v3的index.html虽然不在public下但是打包后会在public下生成一个index.html。项目上线后后续可能会有更改接口的需求不能再次打包死在打包文件内，1.首先把接口根路径写到一个不会打包的文件内，2.然后在接口封装处把接口地址动态传给axios。我们不想让文件被打包就不写type="module"，然后在引入配置文件时注意src="./webconfig.js"路径中不能有public。因为打包后webconfig.js和index.html平级都在打包文件内。在自己封装的接口文件中。
vue3 vite 动态更改编译后 后台服务地址
weixin_45540431的博客
03-12 798
/ 上传文件服务器地址。创建public下config.js。在index.html中引入。
vite(vue3)配置内网ip访问的方法步骤
半兽先生的博客
04-18 702
如果没有进行配置，运行项目之后，看到的访问地址是本地访问地址，其他人访问不了。
Vue打包成dist文件后修改ip地址方法
alo_ne的博客
08-04 4594
为了方便把代码发给别人去部署 所以需要进行修改相应 的ip地址 此时就需要给出配置接口去修改 步骤一： 在public中创建一个config.js文件 之后引入所有可能改变的代码 放在windows下 步骤二： 在index.html中引入 script标签引入 步骤三： 可以直接使用了 特别提醒：如果是放在dom中直接使用 不可以直接这么写 需要在脚本中引用 ...
vite.config.js详细配置
weixin_66128399的博客
01-29 2746
当浏览器请求需要的模块时，再对模块进行编译，这种按需动态编译的模式，极大缩短了编译时间，当项目越大，文件越多时，vite的开发时优势越明显。使用复杂度介于Parcel和Webpack的中间，只是暴露了极少数的配置项和plugin接口，既不会像Parcel一样配置不灵活，又不会像Webpack一样需要了解庞大的loader、plugin生态，灵活适中、复杂度适中。webpack是基于模块化的打包(构建)工具，通过一个入口文件递归出所有模块的依赖关系，经过一系列的过程（压缩，合并），最终生成运行的代码。
vue3 vite 后端地址配置
最新发布
oMangGuoBuDing1的专栏
05-16 360
下面这段加完之后可以在浏览器打印上看到 真实请求的后端地址，否则f12网络看到的只是浏览器的ip和端口号，我因为这个一直以为配置不能生效呢，后来想到可能只是不显示真实地址，因为换了好几个框架都是不行但改完这个地址 网页数据就加载不到了想到的。// 将真实请求地址设置到响应头中。
vue+vite实现前端，其他设备访问主机IP+端口号
qq_59833893的博客
10-18 501
配置：--host 0.0.0.0，输入 npm run serve 则下面有 Local 与 Network 两个访问地址，其他设备使用 Network 访问。
vite+vue3构建前端和多个后端服务器联调
weixin_43134304的博客
06-15 1380
vue3 构建前端与多个后端及测试服务器联调
vue3+vite+ts地址暴露（后端修改地址，前端无需重新打包）
weixin_45874401的博客
12-05 519
在实际项目中，我们常遇到后端IP更新，或者服务器地址更新的情况，这时候就需要前端同步更新baseURL。我们可以利用public里面的文件不会被构建的特性，将baseURL放在public文件夹里面。
vite-配置优化打包
m0_74417967的博客
07-20 122
vite打包优化_vite打包配置_blue_121的博客-CSDN博客
vite项目配置：后端希望能任意更改打包后的接口请求地址
个人博客
06-27 4638
通过window上挂载属性实现
vue3+vite+qiankun+monorepo框架
08-03
vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+...
基于vue3+vite+cesium 生成热力图CesiumHeatmap源码
11-22
在vue3+vite+cesium加载CesiumHeatmap生成热力图时不能直接使用， 需对源码进行重新封装及修改后方可在vue3+vite中调用； 源码已修改并验证可用；
vue3+vite2+ts+vant3 项目demo
04-16
此项目 按照大佬文章 一步步学习搭建 https://juejin.cn/post/7036745610954801166?share_token=5dd94aae-bed2-4733-93ac-306118376443；感谢大佬
Vue3+Vite+TypeScript+Ant Design Vue+Pinia等主流技术的后台管理系统项目.zip
01-03
Vue3+Vite+TypeScript+Ant Design Vue+Pinia等主流技术的后台管理系统项目，支持keepalive和Vite自动生成路由
Vue项目自动更换BaseUrl
Mjxiaomihu的博客
09-06 2841
Vue项目自动更换BaseUrl
vue2中，操作流程实例版之使用vite-Web开发构建工具 & baseURL基准地址-直接赋值和间接赋值
weixin_44867717的博客
04-11 2926
vue2中，操作流程实例版之使用vite-Web开发构建工具 & baseURL基准地址-直接赋值和间接赋值 1、基本介绍 Vite是Vue的作者尤雨溪开发的Web开发构建工具。除了Vite外，前端著名的构建工具还有Webpack和Gulp。和Vue3可以完美结合。 它是一个基于浏览器原生ES模块导入的开发服务器，在开发环境下，基于浏览器支持 dynamic import去解析import，在服务器端按需编译返回，完全跳过了打包这个概念，服务器随启随用，使得启动速度快得惊人，同时支持任意类型文件的解
vite配置静态文件（部署后可手动修改配置文件）
失眠时间的博客
06-01 2822
vite配置静态文件（部署后可手动修改配置文件）
vue3+ts+vite项目打包配置
08-09
对于Vue 3 + TypeScript + Vite项目的打包配置，你可以按照以下步骤进行设置： 1. 安装依赖：在项目根目录下运行以下命令安装所需的依赖项： ``` npm install --save-dev vite @vitejs/plugin-vue@next typescript vue-tsc ``` 2. 创建`tsconfig.json`文件：在项目根目录下创建`tsconfig.json`文件，并添加以下内容： ```json { "compilerOptions": { "target": "esnext", "module": "esnext", "moduleResolution": "node", "strict": true, "jsx": "preserve", "importHelpers": true, "allowSyntheticDefaultImports": true, "esModuleInterop": true, "experimentalDecorators": true, "skipLibCheck": true, "sourceMap": true, "baseUrl": ".", "paths": { "@/*": ["src/*"] } }, "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"], "exclude": ["node_modules"] } ``` 3. 配置`vite.config.ts`文件：在项目根目录下创建`vite.config.ts`文件，并添加以下内容： ```typescript import { defineConfig } from 'vite'; import vue from '@vitejs/plugin-vue'; export default defineConfig({ plugins: [vue()], }); ``` 4. 修改`package.json`文件：将`scripts`字段中的`"dev"`和`"build"`命令修改为以下内容： ```json { "scripts": { "dev": "vite", "build": "vue-tsc --noEmit && vite build" } } ``` 这里我们使用`vue-tsc --noEmit`命令来进行类型检查，然后再执行`vite build`命令进行打包。 现在，你可以运行`npm run dev`启动开发服务器，或者运行`npm run build`进行项目打包。希望这些步骤能够帮助到你！如果你还有其他问题，请继续提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值