vue-admin-template增加自定义环境配置文件build:test

最新推荐文章于 2025-10-08 01:56:15 发布

原创

最新推荐文章于 2025-10-08 01:56:15 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #vue-cli3

本文介绍如何在vue-admin-template项目中增加自定义的test环境配置，包括在package.json中添加新命令，创建test配置文件，并验证配置文件生效的过程。

vue-admin-template里面只在两个环境
build:production
build:state
但是线上还测试环境，预发布环境，等等，
这次就加一个自已的测试环境配置文件，记录一下

1.增加命令，在package.json文件

增加下面的命令

 "scripts": {
   
   
    .......
    "build:test": "vue-cli-service build --mode test",
    .......
  },

2 增加test配置文件

增加文件.env.test

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

ithover

关注关注

1
点赞
踩
0

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

react build打包测试环境报错

chuxuezhe427的博客

09-01

912

#npm run build:test 或 yarn build:test 使用前需要安装dotenv-cli（https://github.com/entropitor/dotenv-cli），否则会报如下错误：安装全局dotenv-cli：执行命令：yarn global add dotenv-cli 或者 npminstall -gdotenv-cli 安装完成：再次执行如图：打包完成 ...

两小时从零学会vue-admin-template框架

drhrht的博客

03-06

8670

一、vue-admin-template 1.项目简介官网：https://github.com/PanJiaChen vue-element-admin是含有丰富的组件，vue-admin-template是一个基础的单页面应用的框架，适合在vue-admin-template上二次开发，开发需要的组件就可以直接的从vue-element-admin里面拷贝上去。适合于后台管理的中小型项目，内部的架构非常的完善，简单易上手。 1.2下载项目 vue-element-admin 官网 vue-admi

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

Build-test

03-19

Prometheus Go客户端库这是的客户端库。它包含两个独立的部分，一个用于检测应用程序代码，另一个用于创建与Prometheus HTTP API对话的客户端。该库需要Go1.13或更高版本。有关释放和稳定性的重要说明该存储库通常遵循。但是，仍将prometheus / client_golang / api /…中的API客户端视为实验性的。 API客户端的重大更改不会触发新的主要版本。对于在CHANGELOG.md中显式标记为EXPERIMENTAL的所选其他新功能，也是如此。在，对需要对存储库的稳定部分进行重大更改的功能进行了批处理和跟踪。目前，v2开发在进行。一旦达到足够的稳定性，v2就会释放该分支。考虑到该存储库的广泛使用，v1和v2将共存一段时间以实现方便的转换。仪表应用包含检测库。请参阅Prometheus网站上的，以了解有关检测应用程序的更多信息。

build-test-1

04-09

行动OpenWrt 使用GitHub Actions构建OpenWrt 用法单击按钮创建一个新的存储库。使用源代码生成.config文件。（您可以通过工作流文件中的环境变量来更改它。）将.config文件推送到GitHub存储库。在“操作”页面上选择“ Build OpenWrt ”。单击Run workflow按钮。构建完成后，单击“操作”页面右上角的Artifacts按钮以下载二进制文件。尖端创建.config文件和构建OpenWrt固件可能需要很长时间。因此，在创建存储库以构建自己的固件之前，您可以通过来检查其他人是否已经构建了满足您需要。将您所构建固件的一些元信息（例如固件体系结构和已安装的软件包）添加到存储库简介中，这将节省其他人的时间。致谢精益的OpenWrt 队友 mxschmitt / action-tmate csexton

vue-vben-admin多环境配置：开发、测试与生产环境隔离

最新发布

gitblog_01167的博客

10-08

386

你是否还在为开发环境的API地址提交到生产环境而头疼？是否因测试环境的配置与生产环境混淆导致线上故障？本文将带你一文掌握vue-vben-admin的多环境隔离方案，通过简单配置实现开发、测试、生产环境的无缝切换。读完你将学会：环境配置文件的创建方法、命令行切换技巧、环境变量的正确使用，以及如何通过配置文件实现不同环境的参数隔离。 ## 环境配置基础架构 vue-vben-admin采用Vit...

vue-admin-template搭建后台管理系统的前端框架

mameng1988的博客

11-01

955

参考：https://blog.youkuaiyun.com/pig_is_duck/article/details/106393317

vue添加配置文件 超简单

一个抠得儿

07-15

9409

在项目下static目录添加文件config.js 内容格式如下： const config = { ta: "abc" } 在项目index.html内引入 <script src="/static/config.js"></script> 在需要使用的组件中直接config.ta就可以获得数据了 ...

精选资源

vue-admin-template：vue后台管理系统，router，permission集成

03-03

vue-admin-template English | 具有Element UI，axios，iconfont，权限控制和lint的最小vue管理员模板现场演示： : 当前版本是在vue-cli上构建的v4.0+ 。如果要使用旧版本，可以将分支切换到，它不依赖于vue-...

精选资源

vue-admin-basic:基于vue-admin-template分支permission-control支持动态路由切换的版本做的二次开发

05-27

vue管理模板 English | 具有Element UI，axios，...cd vue-admin-template # install dependency npm install # develop npm run dev 这将自动打开建造 # build for test environment npm run build:stage # build f

精选资源

vue-admin-template:vue管理模板

03-07

vue管理模板 English | 具有Element UI，axios...cd vue-admin-template # install dependency npm install # develop npm run dev 这将自动打开建造 # build for test environment npm run build:stage # build for

vue-admin:vue + node.js

04-29

一个Vue.js项目 java版后台项目地址构建设置 # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build # server npm ...

vue-cli2.x配置build命令构建测试包&正式包

07-17

1035

vue-cli2.x配置build命令构建测试包&正式包首先安装cross-env插件： npm install cross-env --save-dev (cross-env的作用：通过js在项目中设置不同的环境变量的插件) 第一步：在build文件夹内新建build_test.js文件，内容复制build.js 修改process.env.NODE_ENV = "buildtest"和const webpackConfig = require(’./webpack.test.conf

Vue 配置文件

qq_33218955的博客

03-28

2247

1.首先保证安装 node.js (官网下载地址：https://nodejs.org/en/download/)(安装教程：http://www.runoob.com/nodejs/nodejs-install-setup.html）检查Node.js版本： cmd => path node -v (出现版本号...

第13章 vue-admin-template

richieandndsc的博客

03-31

6805

这是一套简单的vue基础课程，主要介绍vue,vue-router,axios,vuex,element-ui等等

vue-admin-template 打包生成外部可修改接口配置文件

qq_43030908的博客

03-22

2001

1、在public目录下新建config.js文件 var PLATFROM_CONFIG = {}; PLATFROM_CONFIG.baseUrl = "http://1.1.1.1:100" 2、配置utils目录下的request.js文件 let baseURL = window.PLATFROM_CONFIG.baseUrl const service = axios.create({ baseURL:baseURL, timeout: 5000 // 请求超时 }) 3、在pub

【Vue】安装打包vue-admin-template并解决报错

Qxn530的博客

09-26

2972

安装vue-admin-template过程、解决vue-admin-template安装报错以及简单讲述打包过程

vue测试环境配置test

cjj123580的博客

06-28

779

注意：日常开发是用开发环境的，如果发布到线上时，需要切换环境为线上。如果人为去切换也是可以的，但是会容易忘记，可以通过配置不同的运行命令来自动切换环境。(注意:是在vue根目录下面创建文件,跟vue.config.js是同级).env.production如下：（正式线上环境，或者叫生产环境）一种是测试环境，就是测试人员使用的服务环境。一种是生产环境，就是要发布到线上的环境。一种是开发环境，就是本地开发时的环境，.env.development如下：（开发环境）在用vue框架时，经常用到多种环境。

vue.config.js配置项

chenyu_Yang的博客

03-23

1388

vue.config.js(相当于之前的webpack.config.js) 是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。有效的值：`ture` | `false` | `"error"` 当设置为 `"error"` 时，检查出的错误会触发编译失败。这个值也可以被设置为空字符串 ('') 或是相对路径 ('./')，这样所有的资源都会被链接为相对路径，这样打出来的包可以被部署在任意路径。

vue配置开发，测试，生产环境api

weixin_34245749的博客

10-12

658

前言：想实现通过不同的命令，打包调用不同环境的API，实现实现前端自动化部署。前端自动化部署工程比较复杂，这里只介绍通过不同的命令，打包的时候调用不同环境的API，例如：npm run build 调用开发环境接口，打包开发环境npm run build:test 调用测试环境接口，打包测试环境npm run build:pr...

03-13

<think>嗯，用户提供的日志显示在执行 `npm run build:test10` 时出现了错误，导致构建失败。我需要逐步分析可能的原因。首先，日志中的关键信息是退出状态码1，这通常意味着脚本执行过程中出现了错误。查看错误信息，npm提示问题可能不在npm本身，而是构建脚本或项目配置的问题。用户使用的是Vue CLI的构建命令，模式为test10。可能需要检查是否存在对应的环境配置文件，比如`.env.test10`，并且里面的配置是否正确。如果该文件缺失或配置有误，可能导致构建失败。另外，Node.js版本是v14.17.0，npm版本是6.14.13。Vue CLI的一些较新版本可能对Node.js版本有要求，比如需要Node 14或更高，但有时可能需要更新的版本。需要确认项目是否支持当前的Node版本，或者是否需要升级到更稳定的版本，如v14.x的后期版本或更高。依赖问题也是一个常见原因。如果项目依赖没有正确安装或存在版本冲突，可能导致构建失败。建议用户运行`npm install`确保所有依赖正确安装，并且检查`package.json`中的依赖版本是否兼容。查看更详细的日志可能会有帮助。用户可以通过运行`npm run build:test10 --verbose`来获取更多错误信息，从而定位具体问题所在。比如，是否有特定的模块无法找到，或者编译过程中的语法错误等。此外，路径中的特殊字符或空格有时也会引发问题。项目路径`D:\VisualWorkSpace\iotheadwebpage_vue`看起来没有问题，但可以确认是否有其他路径配置错误。最后，可能需要检查Vue CLI的全局安装情况，或者尝试清理缓存。使用`npm cache clean --force`然后重新安装依赖，有时可以解决因缓存导致的问题。总结可能的解决步骤：检查环境配置、确认Node版本、重新安装依赖、查看详细错误日志、处理路径问题，以及清理缓存。通过这些步骤逐步排查，应该能找到导致构建失败的具体原因。</think>这是执行 `npm run build:test10` 时出现的构建失败日志。以下分步骤解析问题原因和解决方法： --- ### 关键错误定位 ```log 12 info lifecycle vue-admin-template@4.4.0~build:test10: Failed to exec build:test10 script 13 verbose stack Error: vue-admin-template@4.4.0 build:test10: `vue-cli-service build --mode test10` 13 verbose stack Exit status 1 23 error Failed at the vue-admin-template@4.4.0 build:test10 script. ``` --- ### 可能原因分析 1. **环境配置问题** - `--mode test10` 表示使用 `.env.test10` 环境文件，需检查项目根目录是否存在此文件。 - 确保 `.env.test10` 中变量格式正确（如 `VUE_APP_API_URL=xxx`）。 2. **依赖缺失或版本冲突** - Node.js 版本为 `v14.17.0`，npm 版本 `6.14.13`，较旧版本可能导致兼容性问题。 - 运行 `npm install` 确保依赖完整安装。 3. **构建脚本错误** - `vue-cli-service build` 执行时可能因代码错误（如语法问题、缺失文件）中断。 4. **路径或权限问题** - 检查路径 `D:\VisualWorkSpace\iotheadwebpage_vue` 是否包含特殊字符或空格。 - 确保对项目目录有读写权限。 --- ### 解决步骤 1. **检查环境文件** ```bash # 确认存在 .env.test10 文件 ls .env.test10 ``` 2. **升级 Node.js 和 npm** - 建议使用 Node.js LTS 版本（如 v16.x 或 v18.x）： ```bash nvm install 16 nvm use 16 ``` 3. **重新安装依赖** ```bash rm -rf node_modules package-lock.json npm install ``` 4. **查看详细错误日志** ```bash npm run build:test10 --verbose ``` - 关注日志中具体的代码报错位置（如 `SyntaxError` 或 `Module not found`）。 5. **清理缓存** ```bash npm cache clean --force ``` --- ### 补充说明 - 若问题持续，可在项目中运行： ```bash vue inspect --mode test10 > webpack.config.js ``` 检查生成的 Webpack 配置是否正确。 - 确保 `package.json` 中 `scripts` 字段包含： ```json "build:test10": "vue-cli-service build --mode test10" ``` --- 通过逐步排查以上可能性，通常可以解决构建失败问题。