Vue配置全局变量config.js

原创已于 2023-10-19 15:31:32 修改 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

于 2023-10-16 17:38:48 首次发布

本文讲述了如何在Vue应用中，当config.js位于public目录时，正确引入并处理带有路由前缀的情况，确保无论是否有前缀都能正确引用配置文件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue配置全局变量config.js

若config.js在public目录下

在这里插入图片描述

在index.html中引入

在这里插入图片描述
这样配置是为了防止路由前缀，如果直接“/config.js”，若路由没有前缀还好，要是有就需要配置为“<%= BASE_URL %>config.js”或者“/前缀/config.js”

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

黎明晓月

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

记-vue vue.config.js 配置webpack全局变量

Chad97的博客

04-27

8421

缘起 vue-cli3 以来是不会暴露 webpack.config.js 的需要我们手动来配置因为近期接手的一个项目我需要从 package.josn 拿参数然后在其他 js文件拿到配置大致步骤如下：项目根目录创建文件 vue.config.js 添加配置 =》配置全局变量 其他js 拿到全局变量 配置大致和 webpack 差不多 for example...

Vue 项目中的 vue.config.js：从基础到高级的全面解析

阿超的博客

05-06

757

在 Vue.js 项目开发中，vue.config.js 文件是项目的核心配置文件，它位于 Vue CLI 项目的根目录下，用于对项目的构建、开发服务器、插件等进行高度自定义设置。通过合理配置 vue.config.js，可以优化项目构建过程、调整开发体验、以及增加项目的灵活性。本文将详细介绍 vue.config.js 的配置项，并通过丰富的代码示例展示如何使用这些配置来优化你的 Vue 项目。通过 configureWebpack，可以对 Webpack 的配置进行自定义，例如添加插件、修改模块规则等。

参与评论您还未登录，请先登录后发表或查看评论

Vue文件配置全局变量的实例

10-18

今天小编就为大家分享一篇Vue文件配置全局变量的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

vue设置全局变量

weixin_52831324的博客

02-23

1149

在src下新建一个utils文件夹，并在此文件夹下新建一个config.js文件。配置完成，.vue文件都可以访问此变量，访问方式为 this.baseurl。在config文件中写入，这里以配置全局请求url为例。到main.js文件中引入此全局变量。

Vue3配置全局变量config.js和Vue2区别

最新发布

topbird2的博客

06-20

200

vue2和vue3使用全局变量文件config在public文件夹下面，其它地方的使用方法。

Vue.js项目中全面解析定义全局变量的常用方法与技巧

在这里，我乐于倾囊相授，分享我的技术心得、项目实战经验、技术技巧。希望能够惠及更多的开发者，助力大家在技术的海洋中扬帆远航。

11-03

2万+

在Vue项目中我们需要使用许多的变量来维护数据的流向和状态，这些变量可以是本地变量、组件变量、父子组件变量等，但这些变量都是有局限性的。在一些场景中，可能需要在多个组件中共享某个变量，此时全局变量就派上了用场。

Vue 配置全局变量

什么都干的派森

11-18

1597

文章目录 1.创建config文件 2.挂载到全局 3.使用变量

vue3.0的vue.config.js详解和完整配置

qq_42755622的博客

10-02

3909

自定义打包后js文件的路径及文件名字。

Vue Cli3 项目 vue.config.js 配置

qq_38870034的博客

09-18

1504

Vue Cli3 项目 vue.config.js 配置配置优化 • 一、js文件最小化处理 • 二、分割代码 • 三、图片资源压缩 • 四、开启gzip压缩 • 五、优化scss配置文件的引入 • 六、公用代码提取，使用cdn加载 • 七、去除console.log 通过vue-cli3脚手架创建的项目，可以通过在项目根目录下创建vue.config.js配置文件来修改优化webpack配置，主要优化流程分为以下几步进行，用于优化项目打包，减小体积大小一、js文件最小化处理代码的最优化, 通过cha

Vue 2 vs Vue 3：深入对比 vue.config.js 配置差异与迁移指南

ranweidaoke的博客

03-02

852

配置文件中的差异不大，但随着 Vue 3 的推出，Vue CLI 和相关工具也做了一些更新和变化。：在这两个配置中，你可以通过简单的 Webpack 配置或者更细粒度的 Webpack 链式 API修改配置，如设置别名、修改图片处理逻辑等。目前 Vue 版本已发布至 Vue 3.x，而 Vue 2.x 和 Vue 3.x 在项目配置和开发方式上有些差异。在 Vue 3 中，的配置文件结构和 Vue 2 是相似的，以下是一个适用于 Vue 3 的完整配置文件示例，兼顾开发环境、生产环境优化以及常用功能配置。

vue.config.js 多环境配置

发果叁

10-28

944

最近找到一个VUE的文档，它将VUE的各个知识点进行了总结，整理成了《Vue 开发必须知道的36个技巧》。内容比较详实，对各个知识点的讲解也十分到位。

vue定义全局变量和全局方法的方法示例

12-08

一、全局引入文件 1、先定义共用组件 common.vue [removed] // 定义一些公共的属性和方法 const httpUrl = 'http://39.105.17.99:8080/' function commonFun() { console.log("公共方法") } // 暴露出这些属性和方法 export default { httpUrl, commonFun } [removed] 2、在需要使用的地方导入 [removed] // 导入共用组件 import glo

Vue项目中设置全局变量

leaf的博客

01-06

3107

Vue项目中设置全局变量 避免每个单页面都要引入一些复用组件和方法我们从 vue-cli 文档中找到这样一句 2.又在webpack中找到 ProvidePlugin 我们就在自己项目的vue.config.js 中，书写配置 const path = require('path'); module.exports = { //其他的配置 // 配置webpack相关 configureWebpack : config => { // 定义全局变量 config.

vue3 使用 vue.config.js 配置使用scss全局变量

空晓天

11-10

4673

vue3 使用 vue.config.js 配置使用scss全局变量记录学习和开发中遇到的问题或难题刚开始我在网上查找了许多资料，都是需要什么安装安装 sass-resources-loader 和配置什么乱七八糟的，我没有尝试过，因为我觉得根本不需要这么麻烦通过查阅资料和尝试，我发现只要在 vue.config.js 配置一下就可以了，我配置的环境是 vue3，但是我觉得 vue2 也应该适用，废话不多说，配置如下： module.exports = { css: { requ

vue.config.js 全局配置

热门推荐

轻风细雨_林木木

03-20

2万+

1.Webpack配置实例参考：https://cli.vuejs.org/zh/config/ vue.config.js vue.config.js 是一个可选的配置文件，如果项目中存在这个文件，那么它会被 @vue/cli-service 自动加载，你也可以使用 package.json 中的 vue 字段配置，但是package.json中需要严格遵照 JSON 的格式来写。文件初始值： /** * @type {import('@vue/cli-service').ProjectOpti

VUE设置全局变量

纳兹咩SAMA的博客

10-20

253

单独写一个全局变量文件，里面定义一些用到的全局变量 在index 文件中引入该文件在main.js中将该文件定义成全局变量 在其他文件中使用直接调用：this.COMMON_CONFIG.authkey。即可。

Vue---全局配置详解

qq_41261490的博客

07-30

1804

全局配置 Vue.config 是一个对象，它包含了所有Vue的全局配置。可以在启动应用前修改配置 slient —取消Vue所有的日志与警告类型： boolean 默认值： false 用法： Vue.config.slient = true optionMergeStrategies —自定义合并策略的选项类型： { [key: string]: Function } 默认值： {...

vue config.js中定义变量实现配置化打包

桃桃小鱿鱼的博客

06-16

1302

vue config.js中定义变量实现配置化打包

vue全局变量的配置

c_qianxia5040的博客

01-17

1万+

一、vue 全局变量(vue 全局变量又是需要单独设置请求路径的前缀，但又要根据当前环境是开发环境还是生产环境动态匹配，那么就用这种方法） .env 在所有的环境中被载入 .env.local 在所有的环境中被载入，但会被 git 忽略 .env.[mode] 只在指定的模式中被载入 .env.[mode].local 只在指定的模式中被载入，但会被 git 忽略注意： 1.其中以.local结尾的文件会被忽略， 2.[mode]可以是：development（开发）、production（生产）、te

vue2 vue.config.js文件定义一个全局变量，并且使用

10-30

在Vue 2项目中，`vue.config.js` 文件是一个配置文件，它允许你在构建过程（如Webpack配置）中添加自定义设置。如果你想在 Vue 应用程序的全局范围内定义一个变量，通常这不是直接通过 `vue.config.js` 来完成的，因为这个文件主要用于处理构建相关的配置，而不是运行时环境变量。然而，你可以将这样的全局变量放在`main.js`或者`src`目录下的`store.js`等专门用于状态管理的模块（例如Vuex store）里，或者使用`process.env.VUE_APP_NAME`这种环境变量的方式来进行声明，这样可以避免污染全局作用域。如果你确实需要在`vue.config.js`中定义一个只对构建过程有用的临时变量，可以在`chainWebpack`钩子函数中通过`webpack.DefinePlugin`插件来设置，例如： ```javascript module.exports = { configureWebpack: (config) => { config.plugins.push( new webpack.DefinePlugin({ MY_GLOBAL_VARIABLE: JSON.stringify('your_value') }) ); } }; ``` 这会将`MY_GLOBAL_VARIABLE`定义为一个全局常量，在编译后的代码中可用。