Vue3.0开发入门之vue.config.js和.env配置文件的说明和使用

最新推荐文章于 2023-08-08 11:17:50 发布
最新推荐文章于 2023-08-08 11:17:50 发布
阅读量1.7k 收藏 1
点赞数
分类专栏： vue 文章标签： vue-cli3 vue
转载请注明出处 https://www.hjljy.cn
本文链接：https://blog.csdn.net/ycf921244819/article/details/117786555
版权

Vue3.0开发入门之vue.config.js和.env配置文件的说明和使用

第一步搭建Vue3.0项目

见文章：vue3.0脚手架搭建

vue.config.js

vue.config.js 是全局 CLI 配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。
官方具体说明地址：https://cli.vuejs.org/zh/config/#%E5%85%A8%E5%B1%80-cli-%E9%85%8D%E7%BD%AE

.env文件

.env文件主要用于存储环境变量
官方说明地址：https://cli.vuejs.org/zh/guide/mode-and-env.html#%E7%8E%AF%E5%A2%83%E5%8F%98%E9%87%8F
其他说明资料：https://www.cnblogs.com/-pdd/p/14718514.html

注意点

1 默认情况下，调用vue-cli-service serve 会查找development的配置文件 vue-cli-service build会查找production的配置文件，无需进行额外的指定
2 配置文件的参数除了特定的，其他的开头尽量设置为：VUE_APP_

光滑的秃头
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue2学习详细
qq_39989608的博客
03-28 1830
安装 直接用 直接用 开发版本 生产版本 <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> NPM 在用 Vue 构建大型应用时推荐使用 NPM 安装[1]。NPM 能很好地和诸如 webpack 或 Browserify 模块打包器配合使用。同时 Vue 也提供配套工具来开发单文件组件。 npm install vue 命令行工具 (CLI) Vue 提供了一个官方的 CL
VUE配置多开发环境/静态配置文件修改地址
lranqi的博客
07-26 2493
在vue-cli中可以使用.env文件配置不同的开发环境，切换不同部署地址。NODE_ENV='production'VUE_APP_BASE_API='/api'.配置开发环境代理,为每一个接口地址加上的/api前缀，这里再通过配置开发环境代理设置代理地址并重写URL。devServer: {proxy:{}}使用window对象，通过外部配置文件显示修改请求。可以在 window 对象上存储数据或属性，并在整个页面中访问它们。
Vue.js 打造高级实战-音乐 App
04-28
# vue-music > Vue.js 打造高级实战——音乐 App ## 项目树 ``` . ├── README.md ├── build │   ├── build.js │   ├── check-versions.js │   ├── dev-client.js │   ├── dev-server.js │   ├── utils.js │   ├── vue-loader.conf.js │   ├── webpack.base.conf.js │   ├── webpack.dev.conf.js │   └── webpack.prod.conf.js ├── config │   ├── dev.env.js │   ├── index.js │   └── prod.env.js ├── index.html ├── package.json ├── prod.server.js ├── src │   ├── App.vue │   ├── api │   │   ├── config.js │   │   ├── rank.js │   │   ├──
vue.config.js常用配置详解
12-13
使用vue-cli3.0搭建项目比之前更简洁，没有了build和config文件夹。 vue-cli3的一些服务配置都迁移到CLI Service里面了，对于一些基础配置和一些扩展配置需要在根目录新建一个vue.config.js文件进行配置 module.exports = { // 选项... } 基本路径 baseUrl从 Vue CLI 3.3 起已弃用使用publicPath来替代。 在开发环境下，如果想把开发服务器架设在根路径，可以使用一个条件式的值 module.exports = { publicPath: process.env.NODE_ENV === 'prod
Web前端框架应用：第7章 Vue开发环境-环境变量及模式.pptx
06-07
第7章 Vue开发环境 Vue CLI脚手架工具 CLI服务和配置文件 静态资源管理 插件 环境变量和模式 学习目标 目录 目录 知识架构 7.1 Vue CLI脚手架工具 知识架构 7.2 插件 知识架构 7.3 CLI服务和配置文件 知识架构 7.4 环境变量和模式 知识架构 7.5 静态资源管理 7.4 环境变量和模式 环境变量 在一个项目的开发过程中，一般都会经历本地开发、代码测试、开发自测、测试环境、预上线环境，最后才能发布线上正式版本。在这个过程中，每个环境可能都会有所差异，如服务器地址、接口地址等，在各个环境之间切换时，需要不同的配置参数。所以为了方便管理，在Vue CLI中可以为不同的环境配置不同的环境变量。 7.4 环境变量和模式 Vue CLI 3构建的项目目录中，移除了config和build这两个配置文件，并在项目根目录中定义了4个文件，用来配置环境变量，具体如下。 .env：将在所有的环境中被载入 .env.local：将在所有的环境中被载入，只会在本地生效，会被git忽略 .env.[mode]：只在指定的模式下被载入。如.env.development用来
vue-cli-plugin-env:从vue.config.js文件定义环境常量
05-01
vue-cli-plugin-env 从vue.config.js文件定义环境常量 yarn add --dev vue-cli-plugin-env vue.config.js module . exports = { pluginOptions : { env : { MY_KEY : 'foo' , SECRET : 5566 } } } main.js console . log ( process . env . MY_KEY ) // 'foo' console . log ( process . env . SECRET ) // 5566
vue3 如何获取env
seimeii的博客
07-28 3236
vue3 如何获取env
Vue项目在vue.config.js文件中使用env文件数据方法
云泽的博客
07-06 3200
Vue项目在vue.config.js文件中使用env文件数据方法 在.env文件中添加一个属性 如： VUE_APP_SERVER_PATH = 'http://localhost:9011' 一定要VUE_APP开头，且值需要带单引号 在vue.config.js文件中调用VUE_APP_SERVER_PATH属性 let serverPath = process.env.VUE_APP_SERVER_PATH; 使用serverPath变量 测试 跨域请求成功！ ..
vue-cli3.0 模式以及env环境文件相关配置
想搞全栈的前端
11-25 2230
环境变量 vue-cli-3.0总共提供了四种方式来制定环境变量： 在根目录添加.env文件，配置所有情况下都会用到的配置（不知道这个存在的意义，所有的都需要的也就不需要配置了吧）。 在根目录添加.env.local 文件，配置所有情况下都会用到的配置，与.env的区别是只会在本地，该文件不会被git跟踪。 在根目录添加.env.[mode] 文件，配置对应某个模式下的配置,比如：.env.development来配置开发环境的配置。 在根目录添加.env.[mode].local文件，配置对应某个模式下
vue3+ts遇到的小问题
work33的博客
09-25 8104
解决：1. 检查是或否是，是的话进入拓展设置，所有的选项都勾选2. 还是不行就要更新vscoe了。一般的话会在力捕抓到一个错误。跟新就好了。
vue3（基于vite）项目初始基本配置
白的夜的博客
06-17 7057
从零开始带你一步步搭建一个完整的vue项目配置
Zeithub-自由职业者的开源时间跟踪，发票和费用管理-Vue.js开发
05-27
安装cp example.env .env docker-compose up -d npm install npm run db：up要在本地运行：npm run dev该应用程序现在位于http：// localhost：3000如何创建新迁移npx db-migrate创建--config config / database....
vue配置各种环境-环境切换问题-打包自由切换
lqlq54321的博客
01-12 2706
vue-cli版本是2.0左右的就会有webpack的config目录 vue-cli版本是3.0以上的就会有vue.config.js没有config目录 我们先来看第一种怎么配置（有webpack的config目录） 目录： 配置：这里一共展示dev环境和生产环境，其他环境在config目录类似添加 第一步： config目录=》index.js dev: { assetsSubDirectory: 'static', assetsPublicPath: '/', p.
Vue开发环境和生产环境的代理配置
qq_55928824的博客
01-04 1196
Vue开发环境和生产环境的代理配置
vue-cli3 配置 vue.config.js 环境变量env
没有翅膀的我们，只是随便认为不能飞而已
10-13 7137
const path = require("path"); const uglifyJsPlugin = require("uglifyjs-webpack-plugin"); const IsProduction = process.env.NODE_ENV === "production"; // 引入文件 function resolve(dir) { return path.jo...
vite+vue3版本配置全局env及process报错
caijihuzhuoya的博客
02-16 4383
process报错应为标识符,建议安装@type/node
vue生产环境和开发环境配置不同的api地址
web前端学习总结
07-25 3654
vue生产环境和开发环境配置不同的api地址 用vue-cli构建的项目中，有两个文件是用来区分生产环境和开发环境的。 /config/dev.env.js /config/prod.env.js 在main.js中可以得到当前的开发环境： var env = process.env.NODE_ENV; 所以根据不同的环境配置不同的api， 其中我有两个存放不同api地址的jso...
vue项目读取全局配置
左直拳的马桶_日用桶
06-29 8927
普遍的需求，却很少有现成的答案。我相信这是普遍的需求。即，在配置文件里定义系统名称、版权人、建设方或者技术支持等信息。一个前端项目，至少有3个地方会用到系统名称：登录页，登录后页面的页头，以及每个页面的title。直接写在页面里，当然没有什么大问题，但修改繁琐，且容易出现不一致的情况。对于VUE项目来说，咋弄？vue页面无须多言，假如存在一个配置文件，直接读取配置文件就好了。而对于项目唯一的页面/public/index.html怎么办？这是一个静态页面。我查了许久。......
Vue3 cli如何抽离出一个配置文件，用于打包后动态修改。
olklj的博客
08-08 583
5. 打包时 config.js 会作为单独的 chunk 进行输出,可以直接修改这样就实现了将配置抽离为单独的文件,打包后可以直接修改配置而不需要重新构建。4. 在代码中可以通过 import 来获取配置。
vue.config.js 引入env.js中的参数
最新发布
08-15
2. 在vue.config.js文件中添加以下代码来引入env.js文件，并将其导出的参数作为配置项： ```javascript const env = require('./env.js'); module.exports = { // ... configureWebpack: { // ... }, // ... ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值