vite 不同的命令打包配置不同的baseurl

最新推荐文章于 2025-04-27 13:17:17 发布

小猫猫改bug

最新推荐文章于 2025-04-27 13:17:17 发布

阅读量1.3k

点赞数 3

文章标签：前端 vue

本文链接：https://blog.youkuaiyun.com/m0_65915285/article/details/139925185

版权

公司需要根据不同的打包命令访问不同的后端接口地址：

例如 npm run build:test

打包出来后访问的后端地址是123.123.123地址

npm run build:prod

打包出来后访问的后端地址是145.145.145

操作：

一、新建三个文件（根据自己的项目需要新建哈！）

二、每个文件里面可以放这三个内容。

在VITE_APP_BASE_API里可以放baseurl（注意这里三个文件就放三个不同的url）

三、在封装响应拦截器的文件的baseurl改成这样子（不会找的童鞋可以全局搜axios.create就可以找出来了）

四、在package.json里写这些命令就好了哦！

关注博主即可阅读全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

小猫猫改bug

关注关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

十二、vite配置详解

张先森的博客

08-25

1万+

vite配置详解

Vite多环境配置与打包:

2301_76662406的博客

10-06

4555

开发命令（如 npm run dev）默认使用开发模式。构建命令（如 vite build）默认使用生产模式。这两者并不冲突。在开发过程中，你通常使用开发模式，而在构建生产版本时，Vite 则使用生产模式。你的项目默认是开发环境，通常是因为没有显式指定其他环境模式。你可以通过查看 package.json、vite.config.js 和环境变量文件来确认和修改环境配置。

参与评论您还未登录，请先登录后发表或查看评论

vite配置环境变量和使用，配置正确后import.meta.env.VITE_APP_BASE_URL编译报错的解决方法

白白的博客

07-15

4154

vite环境变量配置以及使用import.meta.env.*报错解决

vue3 vite打包后动态修改打包后的请求路径，无需打多个包给后端

最新发布

m0_71835253的博客

04-27

561

vue3 vite打包后部署多个服务器环境的时候，需要多次打包很麻烦，所以需要打包之后动态的修改

vite项目配置根据不同的打包环境使用不同的请求路径VITE_BASE_URL，包括报错解决

02-07

5060

在项目根目录下面创建.env和.env.production文件，.env是开发环境使用的，.env.production是生产环境使用的。比如配置axios请求的时候，要修改url地址。

vue2中，操作流程实例版之使用vite-Web开发构建工具 & baseURL基准地址-直接赋值和间接赋值

weixin_44867717的博客

04-11

3065

vue2中，操作流程实例版之使用vite-Web开发构建工具 & baseURL基准地址-直接赋值和间接赋值 1、基本介绍 Vite是Vue的作者尤雨溪开发的Web开发构建工具。除了Vite外，前端著名的构建工具还有Webpack和Gulp。和Vue3可以完美结合。它是一个基于浏览器原生ES模块导入的开发服务器，在开发环境下，基于浏览器支持 dynamic import去解析import，在服务器端按需编译返回，完全跳过了打包这个概念，服务器随启随用，使得启动速度快得惊人，同时支持任意类型文件的解

Vite打包配置

weixin_61485030的博客

10-27

1836

vite常见配置

VUE3后台管理系统第二章，打包多入口配置输入不同命令打包不同内容

哈哈大王

11-19

681

打包多入口配置输入不同命令打包不同内容，nodejs接口配置

Vite配置项base与proxy一致，导致页面{“detail“:“Not Found“}

qq_65755294的博客

06-24

1147

将base设置成动态的，根据获取 .env 中的配置项确定当前是生产环境还是开发环境。不用把base的值加在代理路径前，在开发环境下没有配置到服务器的子路由中，只要服务器地址写正确即可。但是在实际开发过程中，有本地环境、测试环境、预生产、生产环境等等，不同环境对应的配置会不一样。请注意，如果使用了非相对的基础路径base，则必须在每个 key 值前加上该base。.env.development在根目录下，具体配置如下。.env.production在根目录下，具体配置如下。文件, 具体配置如下。

vue3 vite 动态更改编译后后台服务地址

weixin_45540431的博客

03-12

1792

/ 上传文件服务器地址。创建public下config.js。在index.html中引入。

vite 配置公共基础路径

乐辞的博客

12-02

1954

由于vue打包后，资源加载太慢，所以考虑将 js、css 资源等放到oss存储来加快用户的访问速度

Vue3+vite打包配置及部分打包优化~

m0_62626838的博客

08-10

6228

1、步骤一：配置base。这里配置base主要是修改根路径，一般我们在开发环境中引用静态资源可能使用的是绝对路径，但是一旦打包部署到服务器上后可能会报404,无法正确的获取的资源。2、步骤二：可根据需要配置组件及静态资源路径别名（若配置了路径别名使用方法和typescript的类型别名一样，直接替换原路径即可）这里介绍的是vite项目的打包配置，若想了解webpack打包配置可看我的其他博客。（下面来介绍下vite打包配置的步骤）3、步骤三：配置生产环境移除console.log。

Vite项目中根据不同打包命令配置不同的后端接口地址，proxy解决跨域

xiaobai_cpp的博客

07-29

849

在vite.config.ts同级目录添加两个文件。在vscode终端，按需执行以下命令。编辑package.json文件。

vite配置打包环境，执行指令打包产出指定环境文件

qq_52545449的博客

02-21

2637

众所周知，当我们大致写好一个项目的时候，需要部署到生产环境或测试环境，进行实际的体验，而这个时候我们就要区分打包测试环境的还是生产环境。这样才能使得我们部署到测试服或生产服时项目资源能正常加载出来。

【Vue3+Vite】根据运行环境获取 API_BASE_URL

Louis 的博客

11-27

4219

根据运行环境获取 API_BASE_URL

在vite打包环境中创建env环境配值

大青虫的博客

05-18

535

在vite打包环境中创建env环境配值 2.创建更多开发配置环境比如发布环境。3.pagejson 配置运行打包环境。1. 项目根目录下创建.env文件。

vite 环境变量配置

shoping110的博客

11-27

858

vite 环境变量配置

Vite 配置：这些配置日常开发够用了！

一只小松鼠_的博客

02-26

1969

相信大部分兄弟都体验过Vite了，都知道它很快。在学习的时候，官网上的各种配置也是看的眼花缭乱，不知道哪些是必要掌握的。为了提高效率，我把常用的一些配置梳理一下，希望对大家有所帮助。

vue3-vite多环境配置

码农的专栏

06-25

4066

一、新建文件.env和.env.production.env .env.production 二、products/index.vue 二、开发环境运行三、打包拷贝到.netMVC中运行

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`进行项目打包。希望这些步骤能够帮助到你！如果你还有其他问题，请继续提问。