vue项目 npm run build-test报错原因

最新推荐文章于 2025-06-25 17:30:40 发布
原创 最新推荐文章于 2025-06-25 17:30:40 发布 · 3.7k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

作者在项目打包过程中遇到前所未有的奇怪错误，经过一番周折，最终发现竟是缺少一个符号导致的问题，简单调整后顺利解决。

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

之前做过3个项目，打包的时候从来没有出过错，唯一现在这个项目，出了一个奇葩错误。
在这里插入图片描述
百度了很多，用了里面的方法，完全不奏效，然后就去看F12报错
在这里插入图片描述
又百度，结果显示如下
在这里插入图片描述
第一次我完全没在意，因为根本不知道我代码哪里出错，过了一个周末，没办法必须要解决，定下心来一看
在这里插入图片描述
居然缺了一个"符号！ 加上就好了！

vue npm run build 探索
学习真香
08-30 2310
vue npm run build 探索 vue-cli 是一个很好的工具. 它帮助我们集成了babel和webpack, 以及一些常用的插件. 让我们不用过多的关心配置, 专心业务. 但是, 秉承着一个对技术的好奇. 还是驱使我去看了看vue-cli的代码. 想要知道 npm run build 到底为我们做了什么 前言 文章涉及到一些常用的库, 大家可以先简单了解一下, 再看文章可能会更好理解. webpack 这里只做一些简单的介绍, 具体可以看官网 . webpack 是一个现代JavaScript
npm run serve/build 背后的真实操作
热门推荐
奔跑的痕迹的博客
02-28 1万+
vue CLI 用起来的确很舒服，方便省事，但他经过层层封装很难明白，执行完那个npm run serve/build 后他都干了些什么，甚至不知道整个项目是怎么跑起来的，今天自己抽时间就去瞅瞅,为加深记录特此记录记录 文章目录一、探寻npm run 背后的真实操作1、看看 npm run serve2、仿造一个serve2-1. 创建测试文件夹2-2. 在 node_modules\.b...
解决vue打包 npm run build-test突然不动了的问题
01-22
今天遇到一件很奇葩的事情 输入npm run build-test 突然停在这不动了 what? 不动了？！ 后来google了一下 大家都是人才 运行一下这句话 就动了！！ npm config set registry http://registry.cnpmjs.org 补充知识：vue_test_unit_e2e常见问题npm run unit单元测试和npm run e2e集成测试问题 vue项目要进行unit和e2e常见问题 localStorage is not available for opaque origins console.error node_modules
npm run build 报错
阿尔叭叭
01-12 977
map-plugin@1.1.6 build D:\test\map-plugin > cross-env NODE_ENV=production webpack --display-error-details --config webpack.config.js 'cross-env' ▒▒▒▒▒ڲ▒▒▒▒ⲿ▒▒▒Ҳ▒▒▒ǿ▒▒▒▒еij▒▒▒ ▒▒▒▒▒▒▒▒▒ļ▒▒▒ npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! map-plugin..
根据不同的环境打包
m0_66225910的博客
06-25 245
2.npm run build:test这个命令打包的是本地环境的，因为配置了对应的文件。3.npm run build:pro这个命令打包的是生产环境的，因为配置了对应的文件。1.npm run build这个命令打包的是生产环境的。
运行命令：npm run build--test  ，如果index.html 生成的src 路径没有“./”
qiandeqiande的专栏
08-17 1713
Vuebuild 运行命令：npm run build--test ，如果index.html生成的src路径没有“./”，修改“webpack.base.conf.js”文件中的参数“publicPath” 原始代码，只是判断是否为生产环境，如果是运行test还是会获取到“config.dev.assetsPublicPath”路径 解决方案： publicPath:process.env.NODE_ENV==='development' ?config...
vue中执行npm run build报错解决方法？
weixin_30553837的博客
08-06 1691
遇到了执行npm run build 后报错： [build:js ] Module not found: Error: Can't resolve 'scss-loader' in 'D:\works\works\H5-IM\im-h5\src\pages' 在webpack.config.js里面加： test: /\.vue$/,...
打包build加参数，例如npm run build -- test、process.env便捷拼接口名
weixin_43830879的博客
04-17 5724
当我们再写项目的时候，有时候拿到接口返回的图片路径并没有给我们拼上域名，如果我们在页面重复写域名的话，后面变换域名的时候就回很麻烦，这时候我们可以用process.env来做路径前面的域名 这时候我们需要简单的介绍一下process.env是什么东西： vue-cli建立完项目时会有个config包 也就是这个东西，这里的dev.env.js就是我们平时跑项目时使用的，也就是npm run de...
vue中Npm run build 根据环境传递参数方法来打包不同域名
12-12
使用 npm run build -- xxx ，根据传递参数xxx来判定不同的环境，给出不同的域名配置。 1.项目中/config/dev.env.js修改： 新增：HOST: ‘”dev”‘ 'use strict' const merge = require('webpack-merge') const ...
关于vue的npm run dev和npm run build的区别介绍
01-21
关于vue的npm run dev和npm run build的区别介绍，下面就分享给大家，具体如下： ├─build │ ├─build.js │ ├─check-versions.js │ ├─dev-client.js │ ├─dev-server.js │ ├─utils.js │ ├─vue-...
Vue项目执行npm run build 时出现错误的解决办法
做GIS梦的人
07-08 3742
今天在封装自己的npm模块时，出现了一个问题，如下： 之前是可以正常执行的，今天只是将的版本从1.3.0升级到了2.9.1，就无法构建项目了，执行npm run dev是没有问题的。测试更换很多组件都是不解决问题的。extract-text-webpack-plugin这个插件里使用了UglifyJs，而UglifyJs是不支持ES6的语法的。出现这个问题，就是因为mapbox-gl的新版本里使用了ES6的语法。虽然项目里配置了ES6语法自动转ES5，但是看看下面配置就知道了，默认node_modules下
vue项目在test/ts环境打包报错
friend_ship的博客
01-05 1813
vue项目仅在test/ts测试环境打包中报错
vue打包 npm run build-test突然不动了
不积跬步何以至千里
05-12 703
今天遇到一件很奇葩的事情 输入npm run build-test 突然停在这不动了 what? 不动了？！ 后来google了一下 大家都是人才 运行一下这句话 就动了！！ npm config set registry http://registry.cnpmjs.org
npm run build 命令添加参数来打包不同接口域名
weixin_44996006的博客
09-11 6935
npm run build 命令添加参数来打包不同域名 步骤一：config\dev.env.js加上HOST: ‘“dev”’ 步骤二：config\prod.env.js加上HOST: ‘"’+HOST+’"’ 步骤三：在配置域名的文件进行如下逻辑处理 执行命令： npm run build – test npm run build 打包后，如何运行在本地查看效果 将config\index.js文件中build对象下的assetsPublicPath中的“/”，改为“./”即可，就在前面加个点
npm run build卡在node build/build.js
qq_40664253的博客
03-25 5865
npm run build执行打包一直卡在node build/build.js处不动 解决：在build/check-versions.js里注释如下代码 if (shell.which('npm')) { versionRequirements.push({ name: 'npm', currentVersion: exec('npm --version'), versionRequirement: packageConfig.engines.npm }) } ...
vue2项目打包到测试环境之后报错require is not defined
weixin_52941842的博客
01-24 1389
配置打包命令npm run build:test到测试环境之后报错，打包到生产环境没有问题，查找了项目中的require引入似乎也没啥有问题的地方，所以排除是require的原因。
手把手教你使用npm和vite 2.0创建vue项目（非ts），配置打包环境
weixin_41722909的博客
03-22 4125
Vite 需要node版本 >= 12.0.0，使用node --version 查看当前node版本，过低的话需要去官网下载更高的可用版本。 1、创建项目：使用npm，yarn的同学可以去官网查看此步骤 使用 npm --version 查看npm版本，然后创建项目： # npm 6.x npm init @vitejs/app my-vue-app --template vue # npm 7+, 需要额外的双横线： npm init @vitejs/app my-vue-app --.
前端主流框架：项目运行命令 npm 详解
m0_61176833的博客
02-13 1万+
npm提供了一系列命令，用于管理项目的依赖、运行脚本、发布包等。
vue-npm，不同环境的打包以及查看打包内容的方式
xixi_csdn的博客
12-23 2263
文章目录前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结 前言 不同环境打包代码不同，如测试环境，npm run build–test。这种该如何配置呢，我也是才开始学，记录一下。 一、pandas是什么？ 示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。 二、使用步骤 1.引入库 代码如下（示例）： import numpy as np import pandas as pd import matplotlib.pyplot as plt imp
vue-cli-service build npm --mode test
最新发布
07-15
<think>我们正在讨论的是在 Vue CLI 项目中使用 `vue-cli-service build` 命令，并通过 `--mode` 指定环境模式为 `test`。 在 Vue CLI 项目中，我们可以通过环境文件（.env）来定义不同模式下的环境变量。 步骤： 1. 创建环境文件：在项目根目录下，我们可以创建一个名为 `.env.test` 的文件，用于存放测试环境的环境变量。 2. 在 `.env.test` 文件中定义变量：例如，我们可以设置 `NODE_ENV=production` 以及一些测试环境特定的变量，注意只有以 `VUE_APP_` 开头的变量才会被嵌入到客户端包中。 3. 运行构建命令：`vue-cli-service build --mode test` 这样，Vue CLI 会使用 `.env.test` 文件中的环境变量来构建项目。 示例代码（命令）： ```bash # 创建测试环境文件 echo "VUE_APP_API_BASE_URL=https://api-test.example.com" > .env.test # 运行构建命令 vue-cli-service build --mode test ``` 解释： - `vue-cli-service build` 是 Vue CLI 提供的构建生产环境的命令。 - `--mode test` 指定了环境模式为 `test`，这会使得 Vue CLI 去加载 `.env.test` 文件。 - 在 `.env.test` 文件中，我们可以定义环境变量。例如，`VUE_APP_API_BASE_URL` 用于指定测试环境的 API 基础地址。 注意：默认情况下，即使使用 `--mode test`，Vue CLI 也会将 `NODE_ENV` 设置为 `'production'`，因为这是一个构建命令（用于生成用于部署的代码）。但是，我们可以在 `.env.test` 文件中覆盖 `NODE_ENV`，不过通常我们不这样做，因为构建生产环境代码需要一些优化（如代码压缩等）。如果我们需要一个不压缩的构建版本用于测试，可以设置 `NODE_ENV=development`，但这样会失去生产优化的好处。 另一种做法：在 `.env.test` 文件中设置 `NODE_ENV=production`，然后通过其他变量来区分环境。例如： .env.test 文件内容： ``` NODE_ENV=production VUE_APP_ENV=test ``` 然后在代码中，我们可以通过 `process.env.VUE_APP_ENV` 来判断当前环境。 构建命令的执行过程： 1. Vue CLI 会读取 `.env.test` 文件，并将其中定义的环境变量注入到 Node.js 进程和客户端代码中。 2. 构建过程会使用这些环境变量来生成针对测试环境的代码。 在客户端代码中使用环境变量： ```javascript // 在任何 Vue 组件中 console.log(process.env.VUE_APP_API_BASE_URL); // 输出 https://api-test.example.com ``` 注意：环境变量在客户端代码中是静态替换的，因此只能使用 `VUE_APP_` 开头的变量，并且在构建完成后，这些值就被固定了。 如果需要为测试环境构建，但希望保留源代码映射（source map）以便于调试，可以在 `vue.config.js` 中配置： ```javascript module.exports = { productionSourceMap: true, // 默认情况下，在生产构建中，源映射是关闭的，但可以显式打开 // 其他配置... } ``` 但是，请注意，在生产环境中开启源映射可能会暴露源代码，因此测试环境如果在内网使用，可以开启。 另外，我们也可以通过传递参数来改变构建行为，例如： ```bash vue-cli-service build --mode test --dest dist-test ``` 这样会将构建输出的目录改为 `dist-test`。 总结： 使用 `vue-cli-service build --mode test` 命令，结合 `.env.test` 环境文件，可以方便地为测试环境构建应用。 §§相关问题§§: 1. 如何在 Vue CLI 项目中配置多个环境（开发、测试、生产）？ 2. 环境变量在客户端代码中是如何被替换的？ 3. 除了环境变量，Vue CLI 的构建命令还有哪些常用选项？ 4. 如何在构建过程中使用不同的配置文件（例如，为测试环境使用不同的 publicPath）？</think>### Vue CLI 构建命令详解：`vue-cli-service build --mode test` 在 Vue CLI 项目中，`vue-cli-service build --mode test` 是一个用于构建测试环境专用版本的命令。它允许你使用特定于测试环境的环境变量和配置。 #### 完整解决方案 ##### 1. 环境配置设置 首先在项目根目录创建 `.env.test` 文件： ```ini # .env.test NODE_ENV=production VUE_APP_ENV=test VUE_APP_API_BASE=https://api-test.example.com VUE_APP_DEBUG_MODE=true ``` ##### 2. 在代码中使用环境变量 ```javascript // src/utils/api.js const apiClient = axios.create({ baseURL: process.env.VUE_APP_API_BASE, timeout: 10000 }); // 只在测试环境启用调试 if (process.env.VUE_APP_DEBUG_MODE === 'true') { enableDebugTools(); } ``` ##### 3. 添加构建命令到 package.json ```json { "scripts": { "build": "vue-cli-service build", "build:test": "vue-cli-service build --mode test", "build:prod": "vue-cli-service build --mode production" } } ``` ##### 4. 执行构建命令 ```bash npm run build:test ``` ##### 5. 验证构建结果 构建完成后，检查生成的 `/dist` 目录： - 查看 `index.html` 中的环境变量注入 - 检查是否包含测试环境特有的功能 #### 关键概念解释 1. **`--mode` 参数**： - 指定构建使用的环境模式（默认为 `production`） - 自动加载对应的 `.env.[mode]` 文件 - 控制 webpack 的构建行为 2. **环境文件规则**： | 文件名 | 加载时机 | 优先级 | |--------|----------|--------| | `.env` | 始终加载 | 最低 | | `.env.local` | 除 test 外加载 | 中 | | `.env.[mode]` | 指定模式时加载 | 高 | | `.env.[mode].local` | 指定模式时加载 | 最高 | 3. **环境变量规则**： - 只有 `VUE_APP_` 开头的变量会被嵌入客户端包 - `NODE_ENV` 决定构建类型（development/production） - 服务端变量应使用非 `VUE_APP_` 前缀 4. **构建过程差异**： ```javascript // vue.config.js module.exports = { chainWebpack: config => { // 测试环境特有配置 if (process.env.VUE_APP_ENV === 'test') { config.plugin('define').tap(definitions => { definitions[0]['__TEST_MODE__'] = true; return definitions; }); } } } ``` #### 最佳实践建议 1. **安全注意事项**： ```ini # 错误：暴露敏感信息 DB_PASSWORD=secret # 正确：仅前端需要的变量 VUE_APP_API_KEY=public_key_here ``` 2. **多环境管理**： ```bash # 不同环境构建命令 npm run build:dev npm run build:staging npm run build:uat npm run build:prod ``` 3. **集成到 CI/CD**： ```yaml # .gitlab-ci.yml 示例 test_build: stage: build script: - npm ci - npm run build:test artifacts: paths: - dist/ ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值