首页 > 其他分享 >VUE:vite添加环境变量(一)

VUE:vite添加环境变量(一)

时间:2024-04-15 23:44:05浏览次数:20  
标签:VUE URL APP API vite config 环境变量 VITE

新建'.env' (和vite.config.js同一个路径下)

VITE_APP_API_URL=http://localhost

vite.config.js

import { defineConfig, loadEnv } from 'vite'

export default defineConfig((mode) => {
  const env_config = loadEnv(mode, process.cwd())
  const VITE_APP_API_URL = env_config.VITE_APP_API_URL
  console.log(VITE_APP_API_URL)
  return {
    // 构建参数
    build: {
      sourcemap: false
    },
    base: '',     plugins: [vue()],
    resolve: {
      alias: {
        '@': path.resolve(__dirname, './src')
      }
    },
    server: {
      // host域名或者IP
      host: 'localhost',
      port: 8087,
      // 其他配置。。。
      proxy: {
        '/v1/': {
          target: VITE_APP_API_URL + '/v1/',
          ws: true,
          secure: false,
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/v1\//, '')
        }
      }
  }
})

  启动时就可以看到日志打印

标签:VUE,URL,APP,API,vite,config,环境变量,VITE
From: https://www.cnblogs.com/leonlipfsj/p/18137190

相关文章

  • 《Vue.js设计与实现》 第七章 渲染器的设计
    7.1渲染器与响应系统的结合最简单的渲染器及其使用//渲染器functionrenderer(domString,container){container.innerHTML=domString}//使用letcount=1renderer(`<h1>${count}</h1>`,document.getElementById('app'))渲染器与响应式系统结合constcount......
  • 03 Vue3路由
    Vue3的路由与Vue2相似,关于Vue2的路由器相关可以参考Vue2vue-router下面是一些补充路由器工作模式history模式优点:URL更加美观,不带有#,更接近传统的网站URL。缺点:后期项目上线,需要服务端配合处理路径问题,否则刷新会有404错误。constrouter=createRouter({ history:c......
  • vue:日期的相关方法
    1、获取当天日期,格式:yyyy-MM-ddgetCurrentDate(n){vardd=newDate();if(n){dd.setDate(dd.getDate()-n);}varyear=dd.getFullYear();varmonth=dd.getMonth()+1<10?"0"+(dd.getMonth......
  • vue2项目 network无法访问此网站
    vue2项目启动后,local可以访问,但是network不能访问防火墙等等都检查了查到原因如下:本来写的是这样,实际上端口号需要保持一致devServer:{disableHostCheck:true,open:true,host:'0.0.0.0',port:8002,https:false,hotOnly:false,public......
  • vue指令中的import不生效,如何在指令中使用import { useBaseStore, useLocalStore } fr
    在Vue指令中,不能直接使用父组件中的导入语句和变量。指令是在模板编译阶段执行的,而不是在JavaScript的运行时执行的。因此,无法在指令中直接访问父组件的导入和变量。在Vue指令中,不能直接使用ES6的import语法,因为指令是在模板编译阶段执行的,而不是在JavaScript的运行......
  • Vue中的this.$options.data()和this.$data
    Vue中的this.$options.data()和this.$data:https://blog.csdn.net/mocoe/article/details/89682022?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522171316202916800178541038%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=171316......
  • 若依解决VUE前端时间显示问题
    参考:https://blog.csdn.net/qq_43544074/article/details/119139313#:~:text=%E6%97%A0%E6%B3%95%E6%AD%A3%E7%A1%AE%E7%9A%84%E6%98%BE%E7%A4%BA%E6%97%B6%E9%97%B4%E3%80%82%20%E8%A7%A3%E5%86%B3%E5%A6%82%E4%B8%8B%EF%BC%9A%201%E3%80%81%E5%9C%A8%E5%90%8E%E7%AB%AF%E4%BB......
  • vue3中动态添加路由刷新无法正确匹配路由组件
    1.问题动态添加路由之后,页面重新匹配路由,匹配到了设置的404notfound页面该页面是在路径无法匹配到的时候才会跳转的页面2.问题查找在前置路由守卫打印to发现当前地址匹配到的组件是配置的404页面并且此时的动态路由中是含有改路由地址的3.问题原因在页面刷新时......
  • vue2响应式原理
    vue2响应式原理classDep{constructor(){//依赖保存器this.subscribers=newSet();}//收集依赖depend=()=>{if(activeEffect){this.subscribers.add(activeEffect);}};//通知收集的依赖notify=()=>{this.......
  • 快速上手Vuex
    1.简介Vuex是状态管理插件在vue最重要就是数据驱动和组件化,每个组件都有自己data,**template**和**methods**,**data**是数据,我们也叫做状态,通过methods中方法改变状态来更新视图,在单个组件中修改状态更新视图是很方便的,但是实际开发中是多个组件(还有多层组件嵌套)......