vuecli2关于下载本地取环境变量没问题部署后路径取不到环境变量问题解决

功能

下载功能,用a标签实现下载

代码错误思路分析 解决办法可以忽略直接看下面 解决思路

在每个config文件中都定义了file_url,本地运行没有问题,但是部署到服务器开发环境, 拿到的是生产环境的FILE_URL地址

首先看了流水线-构建配置-编译配置-编译脚本里的打包命令: ** 本来是没有dev后缀,我给加上了 **

然后看项目文件里,package.json文件,他的打包设置, 是执行build下build.js文件

webpack.prod.conf.js 配置文件是webpack生产环境核心配置文件。

因为上面直接写死了 环境变量 production 所以下面只能取prod.env文件中的环境变量,也就是 造成了开发环境下载的 FILE_URL=生产环境的FILE_URL

改动思路

  1. 安装依赖:cross-env 是运行跨平台设置和使用环境变量的脚本,使用cross-env解决跨平台设置环境变量的问题

npm i --save-dev cross-env

  1. 修改项目package.json文件

如果需要设置多个环境,那么需要先修改 package.json ,创建所需环境的运行脚本

build命令都是新建的打包命令

通过 cross-env 插件,运行跨平台设置,和 使用不同的环境变量,

** NODE_ENV 、ENV_CONFIG ** 都属于环境变量

** NODE_ENV=xxx 、ENV_CONFIG=xxx ** 设置 webpack 打包时的 NODE_ENV、 ENV_CONFIG 环境变量,可以通过这些环境变量去对系统代码做一些权限操作之类的

因为流水线配置的时候, 容器设置的都是production,所以我设置的 NODE_ENV=production , 用 ENV_CONFIG 区分不同环境

  1. 我的理解是,运行脚本的时候,会自动找到脚本的运行环境,也就是下面一步添加的脚本文件,然后将脚本文件内部的环境变量打包到项目中,最后启动项目,所以,项目中最终使用的环境变量,其实是下面配置的脚本文件中 设置的环境变量

修改项目config配置文件

添加了不同环境的运行脚本,对应的,也需要修改不同环境脚本运行的配置文件。这里的环境变量

① dev.env.js


  1. 找到 build.js文件
  2. 找到下面这个文件
  3. 根据ENV_CONFIG找到不同的环境变量 FILE_URL
相关推荐
深蓝AI4 小时前
Meta 开源用了八年的设计系统 astryx:连坐两天 GitHub 总榜第一,组件库开始写给 agent 的说明书
前端·人工智能
ruanno_top5 小时前
轮播每 3 秒自己翻页:键盘停不下来,读屏也不知道换了页
vue.js
IT_陈寒5 小时前
Vue的watch把我坑惨了,原来要这样用才靠谱
前端·人工智能·后端
1-1=05 小时前
Vue 3 模板语
前端·javascript·vue.js
用户7610304473715 小时前
【转战智能眼镜开发】ROKID AIUI 小游戏 亚马逊标枪项目实战讲解
前端
风卿6 小时前
看着AI写代码太孤独了,来欣赏星云吧:一个DSH 装饰插件
前端·javascript
牧艺6 小时前
弹层不用再手算坐标了:CSS Anchor Positioning 从原理到可上线
前端·javascript·css
用户老李6 小时前
YOLO 目标检测自学教程 07:YOLOv3——多尺度预测
前端
moshuying6 小时前
ESP32 墨水屏金价牌(上):从点亮到把图片推过去
前端
李剑一6 小时前
别再抬杠,前端岗已经没了!无论前后端,我们最终都要成“全干”工程师
前端·面试