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-…

小程序如何搭建在服务器上

小程序可以通过搭建在服务器上,来实现跨平台的访问和使用。以下是搭建小程序在服务器上的步骤: 安装Node.js:首先,你需要在服务器上安装Node.js。你可以从Node.js的官方网站下载并安装。 安装微信开发者工具:然后&…

简单的代码优化(后端)

上一篇谈了谈简单的前端的优化,这次就以下几点谈谈后端的优化。 书写时常见的。 循环里面不要走IO流。 走IO,是要对硬盘进读写操作的。就结论而言,硬盘的读写速度是低于内存的,比如说硬盘上读一次数据,需要1秒&#…

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

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

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

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

泰森多边形

泰森多边形 93 泰森多边形又叫沃洛诺伊图(Voronoi diagram),得名于Georgy Voronoi,是一组由连接两邻点线段的垂直平分线组成的连续多边形。一个泰森多边形内的任一点到构成该多边形的控制点的距离小于到其他多边形控制点的距离。…

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

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

C. You Are So Beautiful Codeforces Round 905 (Div. 2)

Problem - C - Codeforces 题目大意&#xff1a;有一个长度为n的数组a&#xff0c;问有多少个子串[l,r]&#xff0c;满足这个子串作为子序列只在a中出现过一次 1<n<1e5;1<a[i]<1e9 思路&#xff1a;我们发现对于从1开始的连续区间&#xff0c;答案都是非递减的&…

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

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

【Python机器学习】sklearn.datasets分类任务数据集

如何选择合适的数据集进行机器学习的分类任务? 选择合适的数据集是进行任何机器学习项目的第一步,特别是分类任务。数据集是机器学习任务成功的基础。没有数据,最先进的算法也无从谈起。 本文将专注于sklearn.datasets模块中用于分类任务的数据集。这些数据集覆盖了各种场…

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)#方格取数

高能预警&#xff1a;讲了这么久动态规划了&#xff0c;该上点有难度的题吧 目录 题目&#xff1a;方格取数 思路&#xff08;解法一&#xff09;&#xff1a; 解法二&#xff1a; 题目&#xff1a;方格取数 思路&#xff08;解法一&#xff09;&#xff1a; 如果只有两个方向…

React useMemo useCallback useEffect 的区别(保姆级教程)

因个人工作原因&#xff0c;在2023年学起了React TS 这个 “前端大佬” “高阶玩家” 标配的技术栈&#xff0c;一套学习下来个人总结就是&#xff1a;React真特么难用&#xff01;传染病式的渲染逻辑是真让人难受&#xff01;维护之前的代码就是深渊&#xff01;难怪React项目…

SpringMVC的工作流程

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

python 之 矩阵相关操作

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

docker部署与基础操作

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

使用MFC创建一个SaleSystem

目录 1、项目的创建&#xff1a; 2、项目的配置&#xff1a; 3、设置窗口属性&#xff1a; &#xff08;1&#xff09;、设置图标 1&#xff09;、添加导入资源 2&#xff09;、代码初始化图标 &#xff08;2&#xff09;、设置标题 &#xff08;3&#xff09;、设置窗口…

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

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