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
    在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/114543.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

51单片机KeyWard

eg1: 单片机键盘的分类 键盘分为编码键盘和非编码键盘,键盘上闭合键的识别由专用的硬件编码器实现,并产生键编码号或键值得称为编码键盘,如计算机键盘,而靠软件来识别的称为非编码键盘,在单片机组成的各种…

百度松果20231022作业

越狱 盒子与球 斯特林第二类数(用dp求)*盒子的阶乘 int dp[11][11]; //n>k int A(int x){int res1;fer(i,2,x1)res*i;return res; } signed main(){IOS;dp[2][1]dp[2][2]dp[1][1]1;fer(i,3,11){dp[i][1]1;fer(j,2,i){dp[i][j]j*dp[i-1][j]dp[i-1][j-…

面试知识储备--打包工具篇(webpack和vite)

1.vite常用配置 常用配置 1.preprocessorOptions 传递给 CSS 预处理器的配置选项 2.PostCSS 也是用来处理 CSS 的,只不过它更像是一个工具箱,可以添加各种插件来处理 CSS 3.resolve.extensions 导入时想要省略的扩展名列表。默认值为 [‘.mjs’, ‘.js’…

Linux shell编程学习笔记13:文件测试运算

*更新记录:20231020 为补充了(十五)检测文件是否存在并且是一个符号链接 补充了一个例子 Linux Shell 脚本编程和其他编程语言一样,支持算数、关系、布尔、逻辑、字符串、文件测试等多种运算。前面几节我们依次研究了 Linux she…

2.3.C++项目:网络版五子棋对战之实用工具类模块的设计

文章目录 一、实用工具类模块(一)功能 二、设计和封装(一)日志宏封装(二)mysql_util封装(三)Jsoncpp-API封装(四)file_util封装(五)st…

Python---练习:while循环案例:猜数字

需求: 计算机从1 ~ 10之间随机生成一个数字,然后提示输入数字,如果我们输入的数字与随机数相等,则提示恭喜你,答对了。如果输入的数字比随机数大,则提示,猜大了。反之,则提示猜小了…

java读取指定文件夹下的全部文件,并输出文件名,文件大小,文件创建时间

import java.io.IOException; import java.nio.file.*; import java.nio.file.attribute.*; import java.util.ArrayList; import java.util.List; public class Main { public static void main(String[] args) { try { Path startingDir Paths.get("你的目…

【蓝桥每日一题]-动态规划 (保姆级教程 篇10)#方格取数

高能预警:讲了这么久动态规划了,该上点有难度的题吧 目录 题目:方格取数 思路(解法一): 解法二: 题目:方格取数 思路(解法一): 如果只有两个方向…

SpringMVC的工作流程

1、SpringMVC的定义 Spring MVC是基于Java的开源Web框架,它是Spring框架的一部分,用于构建MVC(Model-View-Controller)模式的Web应用程序。它提供了一种灵活且强大的方式来开发Web应用程序,并将应用程序的不同层进行解…

python 之 矩阵相关操作

文章目录 1. **创建矩阵**:2. **矩阵加法**:3. **矩阵乘法**:4. **矩阵转置**:5. **元素级操作**:6. **汇总统计**:7. **逻辑操作**: 理解你的需求,我将为每个功能写一个单独的代码块…

docker部署与基础操作

目录 一、Docker 概述: 1. docker简介: 2. 容器的优点: 3. 容器在内核中支持2种重要技术: 4 . 容器与虚拟机 的区别: 5. docker三个核心概念: 二、安装docker: 1. 关闭防火墙: 2. 安…

使用MFC创建一个SaleSystem

目录 1、项目的创建: 2、项目的配置: 3、设置窗口属性: (1)、设置图标 1)、添加导入资源 2)、代码初始化图标 (2)、设置标题 (3)、设置窗口…

2023-10-22 LeetCode每日一题(做菜顺序)

2023-10-22每日一题 一、题目编号 1402. 做菜顺序二、题目链接 点击跳转到题目位置 三、题目描述 一个厨师收集了他 n 道菜的满意程度 satisfaction ,这个厨师做出每道菜的时间都是 1 单位时间。 一道菜的 「 like-time 系数 」定义为烹饪这道菜结束的时间&am…

【C++】特殊类实现

一、请设计一个类,不能被拷贝 拷贝只会放生在两个场景中:拷贝构造函数以及赋值运算符重载,因此想要让一个类禁止拷贝, 只需让该类不能调用拷贝构造函数以及赋值运算符重载即可。 C98 将拷贝构造函数与赋值运算符重载只声明不定义…

美团面试:Oracle JDK那么好,为何要用Open JDK?

说在前面 在40岁老架构师 尼恩的读者交流群(50)中,最近有小伙伴拿到了一线互联网企业如阿里、滴滴、极兔、有赞、希音、百度、网易、美团的面试资格,遇到很多很重要的面试题: 既然 Oracle JDK 这么好,那为什么还要有 OpenJDK&…

【Java基础面试三十八】、请介绍Java的异常接口

文章底部有个人公众号:热爱技术的小郑。主要分享开发知识、学习资料、毕业设计指导等。有兴趣的可以关注一下。为何分享? 踩过的坑没必要让别人在再踩,自己复盘也能加深记忆。利己利人、所谓双赢。 面试官:请介绍Java的异常接口 …

【Linux】基本操作指令汇总(不完全)

文章目录 操作系统概念补充lspwdsuechocdtouchmkdirrmdir指令 && rm 指令(重要)man指令cpmvcatmorelessheadtailstat时间相关的指令calfindgrepwcsortuniqwhichziptar:打包/解包,不打开它,直接看内容bcunamectrl cctrl rctrl d\ls cpulsmemdf-hw…

Android C/C++ native编程NDK开发中logcat的使用

Android C/C native编程NDK开发中logcat的使用 前言具体用法 前言 在NDK开发过程中,C/C层,需要对代码进行一些调试,日志打印是我们解决异常或崩溃的重要手段,这里我就简单介绍下日志打印三步走。 首先我们先看下官方文档关于日志…

一天吃透Java面试题

给大家分享我整理的Java高频面试题,有小伙伴靠他拿到字节offer了。 Java基础面试题 Java的特点Java 与 C 的区别JDK/JRE/JVM三者的关系Java程序是编译执行还是解释执行?面向对象和面向过程的区别?面向对象有哪些特性?数组到底是…