首页 > 其他分享 >vue 环境配置

vue 环境配置

时间:2023-07-31 10:44:36浏览次数:36  
标签:vue -- 配置 环境 js build env vite mode

  1. 根目录下创建
    .env
    .env.production
    .env.development
  2. 在vite.config.js中使用
defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd());
  const { VITE_NODE_ENV } = env;
})
  1. 其他地方使用
export const requestURL = import.meta.env.VITE_APP_BASE_URL
  1. 启动和打包不同环境 package.json
"scripts": {
 "dev": "vite  --mode development",
 "pro": "vite --mode production",
 "build": "vite build",
 "build:dev": "vite build --mode development",
 "build:pro": "vite build --mode production",
}
  1. 遇到的问题:
    在本项目的/src/configs/index.js中 import.meta.env访问不到
    解决办法:
    最后发现这个项目的vite.config.js中引用了/src/configs/index.js这个文件,浪费我的时间!!!!!

标签:vue,--,配置,环境,js,build,env,vite,mode
From: https://www.cnblogs.com/tangshidedabenniao/p/17592815.html

相关文章

  • vue2集成bpmn流程图,可导入导出预览等
    1.使用到的组件组件源码版本licensebpmn-js地址7.3.1bpmn.iobpmn-js-properties-panel地址0.37.2MITcamunda-bpmn-moddle地址4.5.0MIT版本一定要对,否则可能会报错2.组件代码<template><divid="app"><divclass="container">......
  • vue + vite 在index.html中使用环境变量
    npminstallvite-plugin-html-Dvite.config.jsimport{createHtmlPluginasuseHtmlLoader}from'vite-plugin-html'useHtmlLoader({inject:{data:{title:VITE_APP_BASE_URL,},},}),index.html可以使用啦!!!<pclass=&quo......
  • vue2集成tinymce富文本编辑器,添加本地资源解决加载慢问题
     组件源码版本licensetinymce地址4.9.3MIT示例项目一源码地址:gitee1.封装组件<template><div:class="{fullscreen:fullscreen}"class="tinymce-container":style="{width:containerWidth}"><textarea:id="tinymc......
  • vue3
    一、vue3最终响应式原理letperson={name:'张三',age:15,}//我们管p叫做代理数据,管person叫源数据constp=newProxy(person,{//target代表的是person这个源对象,propName代表读取或者写入的属性名get(target,propName){console.log('有人......
  • Vue的学习笔记
    一、弹窗的初始化1.弹窗打开的时候想要对弹窗进行一些初始化数据(比如从表默认选中第一行),可以用@opened绑定方法进行操作,详见:https://element.eleme.cn/#/zh-CN/component/dialog  二、显示与不显示:v-show视频学习地址(03-key,v-show,computed|【入门篇】从零开始学习Vue3核......
  • 《VTK学习笔记》-01 VS2017+QT5.14.2+VTK9.2.6 环境搭建
    参考win10下在Qt中使用VTK(安装VS2017+安装QT5.9.9+编译配置VTK8.2.0)_如何在qt中使用vtk_HBybhy的博客-CSDN博客其他问题就不说了,主要是VS打开cmaker编译后的代码,先生成,等待半个小时完成后,选择右击INSTALL-->仅用于项目-->仅生成INSTALL,等进度条走完vtk_res文件夹里出现了一些文件......
  • 码云自动化流水线配置并通知飞书之准备工作
    码云流水线❝之前讲过Jenkis方式部署项目,其实对于一些个人小项目和测试项目,我们有一个更方便的工具,码云以及它的流水线,本篇先介绍一下要准备的工作!❞目标是什么主要要做到,在码云上一键构建,自动部署并同时给飞书机器人发送结果。注意可以选择钉钉、飞书、企业微信,我这里选择的是飞书......
  • 工作中遇见的一些配置问题
    工作中遇到的问题想记录一下一个程序员小白每天遇到的问题1.创建了一个Maven的web工程,但是启动一直是404,原服务器未能找到目标资源解决办法:选择deployment,点击加号选择war格式就OK啦目录里面无法创建类,解决办法:右键选择第一个Thisapplicationhasnoexplicitm......
  • 【vue】vue路由传参的三种方式
    【vue】vue路由传参的三种方式原文链接:https://blog.csdn.net/liyunkun888/article/details/83269343前言vue路由传参的使用场景一般都是应用在父路由跳转到子路由时,携带参数跳转。传参方式可划分为params传参和query传参,而params传参又可分为在url中显示参数和不......
  • vue3
    1、ref深拷贝视图层更新不改变源数据constnum=1constrefNum=ref(num)constclick=()=>{refNum++//refNum已经改变了,但原数据num不变}2、toRef源数据改变不更新视图3、toRefs传入一个响应式对象constobj=reactive{name:"iwen",age:19}//取值为obj.na......