如何配置Vue环境

最新推荐文章于 2024-08-09 19:22:24 发布
最新推荐文章于 2024-08-09 19:22:24 发布
阅读量1.6k 收藏
点赞数
分类专栏： Vue 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/pukun888/article/details/124585457
版权

文章目录

前言

当我们使用不同模式启动项目时，对应的环境变量也是不一样，如何选择正确的环境变量就是我们需要去解决的问题

一、Vue CLI的三种模式

当我们使用 Vue CLI 创建项目时，默认自带了三种模式
在这里插入图片描述
提示：但是我创建完项目，并没有找到test模式

二、如何改写当前模式

1. 通过命令行

vue-cli-service build 命令对应的模式为 production，我们可以通过下面的命令，使它的模式变成 development（开发模式）

vue-cli-service build --mode development

2. 通过环境文件

在这里插入图片描述
比如，.env.development 文件，专门为development模式准备的
那么我们如何通过文件来改写模式？
只需要在文件中添加 NODE_ENV=production，我们就可以把development模式改成production模式，如果文件中没有添加NODE_ENV，那么模式会取决于命令行执行的模式

简单来说就是，文件中有NODE_ENV的话，就以文件中的模式为主，没有文件或者文件中没有NODE_ENV变量，就以执行的命令行对应的模式为主

提示：环境文件中申明变量，只能如同以下图片
在这里插入图片描述

三、定义环境文件中的变量

提示：只有 NODE_ENV，BASE_URL 和以 VUE_APP_ 开头的变量才能被嵌入到代码中

  1. NODE_ENV：应用运行的模式
  2. BASE_URL：应用部署的基础路径
  3. VUE_APP_XXXX：这个我们就可以自行定义了，还要以VUE_APP_开头即可

四、如何使用环境文件中的变量

在这里插入图片描述

五、环境文件加载优先级

如果你有专门为环境模式准备的环境文件，会优先选择

比如你有一个.env和.env.development 文件，如果我们启动的命令行对应的模式是development，那么应用会优先选择development文件

总结

简单的总结了Vue环境文件的配置，方便自己日后更加快速的了解内容

减肥的大坤坤
关注
专栏目录
Vue本地开发环境配置及上线部署
weixin_52485890的博客
07-21 2718
Vue本地开发环境配置及上线部署
Vue的环境配置
myx20220713的博客
07-28 6454
Vue的环境配置
Vue项目从搭建环境到打包上线
祈澈菇凉
05-02 1262
1：安装node 端开发框架和环境都是需要 Node.js ，先安装node.js开发环境，vue的运行是要依赖于node的npm的管理工具来实现，下载https://nodejs.org/en/，安装完成之后，打开cmd开始输入命令。（我用的是win10系统，所以需要管理员权限，右键点击以管理员身份运行cmd），不然会出现很多报错。 2：查...
Vue环境配置（Windows）
最新发布
qq_63978748的博客
08-09 1185
PS：cnpm是由淘宝NPM镜像提供的一个npm的镜像服务客户端，用于在中国大陆地区加速npm包的安装，因为直接使用npm在国内有时候会比较慢。它使用了Vue团队推荐的最新项目模板，提供了一种无需全局安装Vue CLI的方式来创建Vue项目，更加简单快捷。vue的使用需要以node.js为前提，如果您的电脑上已经安装了node.js，可直接跳过这一步。现在，你就成功创建了一个你自己的Vue项目模板， 你可以按照自己的想法对各个模块进行修改。初次创建时，会询问我们是否下载对应的依赖项，我们输入y后回车即可。
vue测试环境配置test
cjj123580的博客
06-28 630
注意：日常开发是用开发环境的，如果发布到线上时，需要切换环境为线上。如果人为去切换也是可以的，但是会容易忘记，可以通过配置不同的运行命令来自动切换环境。(注意:是在vue根目录下面创建文件,跟vue.config.js是同级).env.production如下：（正式线上环境，或者叫生产环境）一种是测试环境，就是测试人员使用的服务环境。一种是生产环境，就是要发布到线上的环境。一种是开发环境，就是本地开发时的环境，.env.development如下：（开发环境）在用vue框架时，经常用到多种环境。
VUE环境搭建及打包上线
weixin_30786657的博客
08-03 164
1.vue2.0新手填坑攻略之使用vue-cli搭建vue项目开发环境到项目发布 https://blog.csdn.net/u010020858/article/details/72865101 2.vue项目如何打包扔向服务器 https://www.jb51.net/article/118767.htm 3. 转载于:https://www.cnblogs.com/kongge/p/...
Vue项目上线相关配置
喜欢藏风里
08-01 1578
项目上线相关配置 1.通过node创建web服务器 创建node项目，并安装express,通过express快速创建web服务器，将vue项目打包所生成的dist文件夹，托管为静态资源即可。 1.1.创建vue-shop-server文件夹，并用vscod打开,将原项目的dist文件夹复制进来。在终端中输入： npm i -y npm i express -S !](https://img-blog.csdnimg.cn/20200801091522631.png?x-oss-process=im
vue学习02-vscode配置vue环境
04-02
在VSCode中配置Vue环境涉及几个关键步骤，主要包括安装必要的工具和创建Vue项目。以下是对这些步骤的详细解释： 1. **安装VSCode和Node.js**： 首先，确保你已经安装了Visual Studio Code (VSCode)，这是一个强大...
vue项目环境变量配置的实现方法
12-09
实际开发中，开发环境和生产环境中一些变量是不同的，比如接口地址等等，打包之前需要手动切换。 编译时 新建env.js let baseUrl = ''; if(process.env.NODE_ENV == 'production'){ baseUrl = '...
vue3.0环境变量配置.md
04-08
vue3.0环境变量配置大致思路： 1，创建修改相关配置文件（Ctrl + C V即可） 2，封装 axios（根据配置文件，首先判断当前环境，获取对应环境的数据库地址作为当前环境下的基础地址，**拼接到** axios 里面的 url ） 3...
vue安装及环境配置.docx
07-11
### Vue.js 安装及环境配置详解 #### 一、Vue.js 简介 Vue.js 是一个用于构建用户界面的渐进式框架。它的设计非常灵活，能够轻松地被集成到任何现有的项目中，无论是简单的单页应用还是复杂的多页应用。Vue.js ...
详解Vue前端生产环境发布配置实战篇
11-28
前言 首先这篇文章是写给Vue新手的，老司机基本不用看了。 当我们刚接触vue的时候，特别是对于第一次用前端框架的同学来说，心情可以说是比较激动的，框架带来的种种新体验，是以前jQuery无法给你的兴奋和满足感。但是在体验了几个demo的新鲜感之后，我们就要考虑如何把框架结合到我们实际的开发中如何应用的问题了。 下面我主要总结三个和生产发布相关的问题：资源文件发布文件夹配置，图片文件的引用，以及后台接口调试方法。 一，资源文件发布配置 一般项目都是用vue-cli脚手架搭建项目，然后编写自己的代码。vue-cli脚手架生成的配置，默认资源文件都在static文件夹下面，build发布的js
vue环境配置和项目简单的部署以及修改
07-05
Vue.js（读音 /vjuː/, 类似于 view）是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。它不仅易于上手，还便于与第三方库或既有项目整合。 另一方面，当与单文件组件和 Vue 生态系统支持的库结合使用时，Vue 也完全能够为复杂的单页应用程序提供驱动。
vue正式环境与测试环境压包配置方法
weixin_33804582的博客
06-27 243
vue正式环境与测试环境压包配置方法 1.安装cross-env cnpm install --save-dev cross-env 复制代码 package.json配置修改 这里分别添加env_config=prod，env_config=dev来控制当前的压包环境 package.json "scripts": { - "build": "node build/build.js", +...
Vue安装及环境配置教程(超详细图文教程)
java骨灰级码农，10年IT从业经验
05-18 7146
将npm的全局模块目录和缓存目录配置到我们刚才创建的那两个目录。到这里，Vue安装及环境配置就已经全部完成，如有不会，欢迎骚扰！先把路径改到刚刚创建的项目，然后再运行，语句如下。输出了版本号就说明Node.js已经安装成功。变量值：你的安装目录\node_modules。可以选择创建Vue2版本或者Vue3版本的项目。（注意中间有个空格）验证是否安装成功。创建vue项目，选择项目想要放的位置。系统变量中新增一个变量，如下👇。一直Next即可完成安装。打开cmd窗口，执行如下命令。安装webpack模板。
vue前端项目上线配置
weixin_42539854的博客
04-07 1500
vue前端项目上线配置 1.准备云服务器 建议使用阿里云、腾讯云、华为云、百度云 自行官网购买或新人免费体验 2. 工具安装 xShell(远程连接工具) 新建会话 主机：服务器公网IP，验证用户、密码 完成连接 xFTP(文件传输工具) 3. 服务器nodejs安装 在nodejs官网（https://nodejs.org/en/）找到对应版本，复制下载路径 在xShell远程控制台输入： # mkdir /data/tools // 新建文件目录，保存安装包 # cd /data/to
完整的 vue-cli 项目环境配置到开发上线历程（一）
weixin_43074269的博客
08-19 319
最近，想把自己关于一个vue项目从 0 到 1 的开发历程记录一下，大家有什么意见可以和我说一下。 **项目主要技术： vue-cli（2.x版本） 、 elementUI 、ES6 等一些前端技术；** **项目主要内容：1、基础框架的搭建； 2、解决跨域的问题； 3、项目配置的问题； . . . .后续继续更新** 接下来正式进入正题： 一、项目环境搭建 首先，需要下载 node.js 【全局安装】 https.
vue配置开发环境和测试环境
weixin_45374484的博客
06-18 636
构建打包环境 在vue.config.js文件中设置代理 module.exports = { productionSourceMap:false, outputDir:process.env.NODE_ENV == 'production'?'dist':'test', //构建打包目录 devServer:{ proxy:'http://test.haitao.api.dxanm.com' } } 创建.env.test文件 NODE_ENV = 'ua
如何调试Vue项目
热门推荐
ZHANGJNWEI的专栏
08-04 1万+
1、今天下载了ELM大神开源的vue2-elm项目，想更深的了解vue的内部机制，于是有了想调试程序的想法; 一开始我是直接使用chrome浏览器的开发工具进行跟踪，但是我发现根本无法调试，百度了一下Vue项目的调试法，还真是被我找到了，于是乎就做一下笔记，练练打字的技能，分享我的成长之路； 首先，先谢谢哪位大神写的vue-devtools插件，没有这个，我也没什么内容讲了； 首先当然是用g
vscode配置vue环境
07-25
要在VSCode中配置Vue环境，你可以按照以下步骤进行操作： 1. 首先，你需要安装Vetur插件。在VSCode的插件库中搜索Vetur，并安装它。这个插件可以让VSCode能够识别Vue代码。\[1\] 2. 接下来，你可以设置一些快捷键。在VSCode中，点击文件 -> 首选项 -> 用户代码片段，然后点击新建代码片段。取名为vue.json，并确定保存。这样你就可以自定义一些快捷键来提高开发效率。\[1\] 3. 另外，我推荐你使用ESLint插件来格式化代码。ESLint是一个语法规则和代码风格的检查工具，可以帮助你保证代码的语法正确性和风格统一性。你可以在VSCode的插件库中搜索ESLint，并安装它。每次保存代码时，VSCode会自动检查并标红不符合ESLint规则的地方，并提供一些简单的自我修正。这样可以避免基本语法错误，并提高代码的可读性。\[2\] 4. 最后，你可以创建一个Vue项目。在CMD或者VSCode终端中，选择一个文件夹作为项目的根目录，然后输入以下指令来创建Vue项目：vue init webpack 项目名。按照提示一步步进行，最后输入回车即可创建Vue项目。要运行项目，先使用cd命令切换到项目文件夹，然后输入npm run dev来启动项目。\[3\] 通过以上步骤，你就可以在VSCode中配置Vue环境了。希望对你有帮助！ #### 引用[.reference_title] - *1* *2* *3* [VSCode 配置Vue 脚手架环境 vscode 配置 vscode 配置 vue 环境 vscode插件 vscode必备插件 vue插件](https://blog.csdn.net/qq_40739917/article/details/109596030)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值