UNI+VITE(Vue3)如何自定义配置打包输出目录？UNI_OUTPUT_DIR？

最新推荐文章于 2025-04-08 18:49:43 发布

antlers777_

最新推荐文章于 2025-04-08 18:49:43 发布

阅读量3.3k

点赞数 8

分类专栏： uni-app vue 文章标签： vue.js 前端 javascript uni-app

本文链接：https://blog.youkuaiyun.com/weixin_43952913/article/details/132065632

版权

uni-app 同时被 2 个专栏收录

7 篇文章

订阅专栏

vue

4 篇文章

订阅专栏

文章讲述了作者在将Vue2的uniapp项目升级到Vue3时，发现之前的Docker输出目录配置不再生效。通过在package.json中修改build:prod:h5配置为unibuild--modeproduction--outDirdocker/h5，解决了这个问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

缘由

最近项目要跑流水线，运维规定的包输出目录是根目录docker/h5，之前写过vue2版本的uniapp项目，设置如下

"build:h5": "cross-env NODE_ENV=production UNI_PLATFORM=h5 UNI_OUTPUT_DIR=docker/h5 vue-cli-service uni-build",

搬到vue3下就失效了，Dcloud中也找不到解决方案。

解决

但是！我提供了正确的解题，如下：
在package.json内作如下配置:

"build:prod:h5": "uni build --mode production --outDir docker/h5",

成功！
不用谢，各位！

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

antlers777_

关注关注

8
点赞
踩
2

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

使用UniApp、Vue 3和Vite实现多环境打包

AvskBug的博客

09-28

2173

我们通过配置环境变量、使用Vite进行打包，并在Vue组件中使用环境变量来实现不同环境下的API地址切换。在本文中，我们将探讨如何使用UniApp、Vue 3和Vite构建一个前端应用，并实现多环境的打包功能。我们将使用UniApp作为跨平台的开发框架，Vue 3作为主要的JavaScript框架，以及Vite作为打包工具。这将使用Vite进行打包，并根据当前环境的配置进行构建。的环境变量，它将根据不同的环境指向不同的API地址。文件中的环境变量，并将其注入到代码中。上面的代码中，我们使用了。

【uni-app系列】uni-app之多环境配置实现自动部署

邓邓子的博客

05-03

4561

目录一、uni-app 不同打包方式下的环境配置1.HBuilderX 方式2.基于 vue-cli 命令行方式二、配置多环境实现自动部署1.编写 js 文件，对环境进行判断2.修改 package.json 文件3.打包 uni-app 项目在不同阶段需要部署到不同的环境，比如开发环境（dev）、测试环境（test）、UAT 环境（uat）、生产环境（prod）等，那么如何通过自动化构建工具实现在多环境下自动部署呢？我们先来看看不同打包方式下的环境配置。一、uni-app 不同打包方式下的环境配置 u

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

UNIAPP自定义打包输出目录

weixin_37611986的博客

08-02

1019

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档。

vite的生产环境配置

最新发布

m0_51429350的博客

04-08

1539

（外部依赖排除）‌‌作用‌：声明不打包进最终产物的第三方依赖（如vuelodash），减小构建体积‌。‌配置示例‌：build: {external: ['vue', 'axios'] // 或使用正则表达式：/node_modules/});‌6.2 input（入口文件配置）‌‌单入口‌：input: 'src/main.js' // 默认入口路径‌‌多入口‌（多页应用）：input: {6‌.4output（输出配置）‌‌基础选项‌：dir：输出目录（默认dist）‌16。

vue项目配置vite打包输出文件夹（css，img，js，font）

qq_33522195的博客

03-25

5022

在dist目录下分类输出对应的文件，如css，img，js，font，避免杂乱无章都塞assets文件夹

vue3.x项目，配置项目打包到二级目录

小白菜的博客

03-14

1723

一、打开 vite.config.js 文件，添加或修改base字段，将其值设置为二级目录的路径。vue3.x项目，配置项目打包到二级目录。

Vue3 学习笔记（三）Vue3 项目打包及目录结构说明

w风雨无阻w的专栏

10-23

2435

该目录一般包含 index.html 文件及 assets 目录，assets 目录包含了静态文件 js、css 以及图片目录 images（如果有图片的话）。当我们准备将应用发布到生产环境时，就需要打包 Vue 项目。执行完成后，会在 Vue 项目下会生成一个。

vue3打包封存固定文件到dist目录

qq_36958916的博客

11-14

1217

src:autoindex.html 是文件位置，相对于当前文件，我是把文件放在了项目根目录，所以直接写文件名字。dest:dist 是需要保存到的对应的文件夹。2，在vite.config.js文件中导入。

uni-app修改指定开发代码打包目录，而非生成代码目录

u010378398的专栏

01-18

3752

近期学习uni-app开发，按照网上教程通过vscode下载模板后，再将所有代码拷贝到离线环境，使用npm run dev:h5运行或者使用npm run build:h5(此处以H5为例)，一切都挺顺利。由于本人前后端都会，所以想着先分个目录搭个环境，前端使用uni-app，后端使用express，数据库使用MySQL或者其他数据库，打算将src目录分成app目录和server目录，一个存放前端，一个存放后端，如下：那么问题来了，一般使用框架都会有一些配置文件或者指定打包目录，本人想.

vue3前端组件库的搭建与发布（一）

qq_38133850的博客

09-19

2291

最近在做公司项目中，有这么一件事情，很是头疼，就是同一套代码，不同项目，要改相同bug，改好多遍，改的都想吐，于是就想做一个组件库，这样更新一下就全都可以了，当然也是第一次主导组件库的搭建，有哪些不对的，还请各位大佬指出来哈。

uniapp项目打包成APK包（问题：未配置appkey或配置错误）

weixin_51169097的博客

10-18

1722

目录中的文件文件build_releade.sh内容。

@vue/cli创建的uniapp项目，使用env配置文件，切换微信mp-appid

qq_28370025的博客

06-23

1737

如何在@vue/cli创建的uniapp项目，使用env配置文件，切换微信mp-appid。 uniapp通过不同的环境变量修改微信小程序打包后的appid。

vite自定义打包路径

jiangliuhuan123的博客

09-22

3235

修改vite.config.js。

Vue3+Uniapp小程序自动化打包上传

weixin_43218691的博客

05-15

1026

使用 vue-cli 搭建的小程序, 当项目开发完成后，需要打包上传小程序代码：在命令行执行打包小程序，然后在对应平台的【开发者工具】导入 dist/build/mp-xxx 文件夹，打开项目，上传小程序。流程较多, 比较繁琐。所以采用小程序自动化打包上传并且集成到发布平台实现真正的一键上传。

vue 3.0 项目目录说明

weixin_38673922的博客

12-10

631

vue-demo ├── dist //项目构建后的输出目录 ├── node_modules │ └── ... // 各类依赖 ├── public │ └── index.html // 项目主入口文件 │ └── ... // 其他公共资源 ├── src │ └── api │ └── config.js //存放后端请求接口地址 │ └── http.js //封装axios的请求方式(get请求、post请求) 封装axios超时请求时间 t.

vue-cli3打包dist路径问题修改打包配置

weixin_45752063的博客

12-01

7153

在vue.config.js目录下配置 module.exports = { /** 区分打包环境与开发环境 * process.env.NODE_ENV==='production' (打包环境) * process.env.NODE_ENV==='development' (开发环境) * baseUrl: process.env.NODE_ENV==='production'?"https://cdn.didabisai.com/front/":'front/'

uniapp 更改输出目录，自定义打包目录

热门推荐

weixin_43208652的博客

04-02

1万+

在用uniapp打包项目到生产服务器的时候每次都会多生成两个二级目录。导致静态资源访问出现一些问题。但是官方文档上vue.cofig.js中修改webpack配置outputDir这种方式是不支持的。最后发现需要在package.json打包命令中增加这么一句 UNI_OUTPUT_DIR=你的指定目录 ...

uni-app5+app打包,vue3开发vite.config.js的配置

qq_38687592的博客

12-19

1993

targets: ['defaults', "ie >= 11", 'chrome 52'], // 需要兼容的目标列表，可以设置多个。// targets:['chrome 52', "defaults" ,"ie 11"], // 需要兼容的目标列表，可以设置多个。/* 1.下面的注释打开，荣耀平板可以用，注释掉小米联想平板可以用 *//* 2.下面的注释打开，荣耀平板可以用，注释掉小米联想平板可以用 */// publicPath: './',/*配置打包后的资源路径*//* 打包压缩 */

【Vite】控制Vite打包结构

owo_ovo的博客

09-30

1860

【Vite】控制Vite打包结构

vue2主应用+vite vue3子应用+ts 子应用如何配置？

10-30

在Vue 2作为主应用搭配Vite和Vue 3子应用的架构中，同时引入TypeScript支持，你需要做以下几个步骤来配置： 1. **创建主应用**: 使用Vue CLI 3创建Vue 2项目，并选择包含TypeScript的支持。运行 `vue create main-app` 并选中 "Vue CLI + TypeScript"。 ```sh vue create main-app --typescript ``` 2. **配置主应用的路由**: 在 `main-app/src/router/index.ts` 中，设置默认路由指向Vue 3子应用。你可以通过动态导入和懒加载来避免预加载整个子应用。 ```javascript import { createRouter, createWebHistory } from 'vue-router'; import Home from './views/Home.vue'; import SubApp from './components/SubApp.vue'; const routes = [ // 主应用路由 { path: '/', component: Home }, // 动态导入子应用 { path: '/subapp', component: () => import('./components/SubApp.vue') } ]; export default createRouter({ history: createWebHistory(process.env.BASE_URL), routes }); ``` 3. **创建子应用**: 使用Vue CLI 3为Vue 3项目起一个新的名字，比如 `vue create sub-app`。然后在 `sub-app` 中创建一个基本的Vue 3项目并选择TypeScript支持。 4. **子应用的配置**: 设置 `sub-app` 为单文件组件，因为Vite默认支持TS。确保所有组件都导出`default` export，并且导入时不需要手动添加`.vue`后缀。 5. **构建工具集成**: 在主应用的`vite.config.js`中，配置跨域以允许访问子应用。例如，添加以下规则： ```javascript import resolve from 'path.resolve'; // ...其他配置 server: { base: resolve(__dirname, '../'), port: process.env.PORT || 3000, proxy: { '/subapp': { target: 'http://localhost:8080/subapp', changeOrigin: true, secure: false, }, }, }, ``` 这将把主应用的`/subapp`路由代理到子应用运行的端口（在这里假设子应用在`8080`）。 6. **打包构建**: 对于子应用，你需要将其作为单独的静态资源部署，因为Vite通常不会处理嵌套的Vue应用程序。完成后，从`sub-app/dist`目录发布它。