vue3 vite如何读取文件内容

 更新时间:2024年05月23日 10:06:46   作者:мо仙堡杠把子ご灬  
这篇文章主要介绍了vue3 vite如何读取文件内容问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

vue3 vite读取文件内容

const modulesFiles = import.meta.globEager('./routerConfig/*.js');
let modules = [];
for (const path in modulesFiles) {
  modules = [].concat(modules, modulesFiles[path].default);
}

webpack

let routerArr = [];

// 自动加载该目录下的所有文件
const files = require.context('./', true, /\.(js)$/);
// 根据文件名组织模块对象
files.keys().map(src => {
  const match = src.match(/\/(.+)\./);
  if (match && match.length >= 1) {
    const moduleValue = files(src);
    if (moduleValue.default) {
      routerArr = [].concat(routerArr, moduleValue.default);
    }
  }
});
export default routerArr;

vue3使用vite配置环境变量

环境变量和模式 | Vite 官方中文文档

1、环境变量

1.1、环境模式

.env                # 所有情况下都会加载
.env.local          # 所有情况下都会加载,但会被 git 忽略
.env.[mode]         # 只在指定模式下加载
.env.[mode].local   # 只在指定模式下加载,但会被 git 忽略

1.2、默认环境变量

  • import.meta.env.MODE: {string} 应用运行的模式
  • import.meta.env.BASE_URL: {string} 部署应用时的基本 URL
  • import.meta.env.PROD: {boolean} 应用是否运行在生产环境
  • import.meta.env.DEV: {boolean} 应用是否运行在开发环境 (永远与 import.meta.env.PROD相反)

1.3、应用环境变量

  • .env文件:所有环境下都会加载
  • .env.development文件:开发环境
  • .env.production文件:生产环境

可以通过 import.meta.env.MODE === 'development' 进行判断

VITE_APP_NAME = dist-icon

注意:变量名称必须VITE_开头

1.4、使用环境变量

// 判断
const isProd = import.meta.env.MODE === 'production'
// 读取
const appName = import.meta.env.VITE_APP_NAME

在项目中,根据项目业务和情况来配置环境变量。.env.development一般为默认,非测试或特定情况可不用配置

2、自定义环境变量

如果使用自定义配置环境变量,import.meta.env.MODE中的运行环境将变成自定义的环境,比如:import.meta.env.MODE:hbjt。

不再是用development或production来区分开发环境和生产环境。

要想在自定义环境变量中控制是开发环境还是生产环境,可以定义.env.projectName(生产环境)、.env.projectName-dev(开发环境)。

自定义变量 NODE_ENV = development 或者 ODE_ENV = production 来控制是否是生产环境

2.1、命名环境变量

.env.projectName(项目名称)

一般应用场景:控制同一套框架下根据项目打包不同的业务、特定环境下的变量或环境地址

注意:.env文件中存储默认的环境变量

2.2、使用环境变量

  • dev:启动本地环境项目。
  • serve:projectName:启动指定环境的本地项目
"scripts": {
  "dev": "vite",
  "serve:projectName": "vite --mode projectName",
  "build": "vue-tsc && vite build",
  "build:projectName": "vue-tsc && vite build --mode projectName",
  "preview": "vite preview",
  "lint:fix": "eslint --ext .ts,.tsx,.vue --fix ."
}
  • 启动指定环境项目后,才可以访问到环境变量,否则默认取.env文件下环境变量
  • --mode projectName(项目名称-可自行定义)

3、vite中使用环境变量

import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'
import VueSetupExtend from 'vite-plugin-vue-setup-extend'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { VantResolver } from 'unplugin-vue-components/resolvers'
import viteLegacyPlugin from '@vitejs/plugin-legacy'
 
export default defineConfig(({ command, mode }) => {
  const env = loadEnv(mode, process.cwd(), '')
  const appName = env.VITE_APP_NAME
  console.log('env', env)
  return {
    plugins: [
      vue(),
      VueSetupExtend(),
      AutoImport({
        resolvers: [VantResolver()]
      }),
      Components({
        resolvers: [VantResolver()]
      }),
      viteLegacyPlugin({
        targets: ['chrome 52', 'ie >= 11'], // 需要兼容的目标列表,可以设置多个
        additionalLegacyPolyfills: ['regenerator-runtime/runtime'] // 面向IE11时需要此插件
      })
    ],
    resolve: {
      // 设置快捷指向
      alias: {
        '@': resolve(__dirname, './src')
      }
    },
    build: {
      // 指定输出路径
      outDir: appName
    },
    base: BASE_URL,
    server: {
      port: 8086,
      host: '0.0.0.0',
      open: true, // 启动服务是否自动打开浏览器
      cors: true, // 跨域
      proxy: {
        '/webspiderweb': {
          target: '',
          changeOrigin: true,
          secure: false
        }
      }
    },
    define: {
      'process.env': {
        VITE_APP_NAME: env.VITE_APP_NAME,
        VITE_APP_BASE_URL: env.VITE_APP_BASE_URL
      }
    }
  }
})
  • define:将全局变量注入到代码中
  • process.env:用于访问运行时的环境变量

使用:import.meta.env.VITE_APP_NAME 或 process.env.VITE_APP_NAME

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 关于vue2使用swiper4的踩坑记录

    关于vue2使用swiper4的踩坑记录

    最近写vue的一个练手项目需要在里面实现一个轮播图,想到去用第三方插件,百度了一轮,发现大部分都是swiper这个插件,这篇文章主要给大家介绍了关于vue2使用swiper4踩坑的相关资料,需要的朋友可以参考下
    2022-01-01
  • 基础的前端vite项目创建过程详解

    基础的前端vite项目创建过程详解

    这篇文章主要介绍了如何使用Vite创建一个前端项目,并配置了Vue Router、Vuex、Element Plus、Axios和Element Plus图标等第三方依赖,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-11-11
  • vue实现简单加法计算器

    vue实现简单加法计算器

    这篇文章主要为大家详细介绍了vue实现简单加法计算器,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-10-10
  • Vue3+ElementUI 多选框中复选框和名字点击方法效果分离方法

    Vue3+ElementUI 多选框中复选框和名字点击方法效果分离方法

    这篇文章主要介绍了Vue3+ElementUI 多选框中复选框和名字点击方法效果分离方法,文中补充介绍了VUE-Element组件 CheckBox多选框使用方法,需要的朋友可以参考下
    2024-01-01
  • VUE中的打包删除文件、图片的HASH码

    VUE中的打包删除文件、图片的HASH码

    这篇文章主要介绍了VUE中的打包删除文件、图片的HASH码,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • vue3+ts代理的使用

    vue3+ts代理的使用

    本文主要介绍了vue3+ts代理的使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-12-12
  • vue中子组件如何间接修改父组件传递过来的值问题

    vue中子组件如何间接修改父组件传递过来的值问题

    这篇文章主要介绍了vue中子组件如何间接修改父组件传递过来的值问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-05-05
  • vue结合vue-electron创建应用程序小结

    vue结合vue-electron创建应用程序小结

    这篇文章主要介绍了vue结合vue-electron创建应用程序,本文给大家介绍了安装electron有两种方式,两种方式创建的项目结构大不相同,需要的朋友可以参考下
    2024-03-03
  • Vue3中Provide / Inject的实现原理分享

    Vue3中Provide / Inject的实现原理分享

    provide和inject主要为高阶插件/组件库提供用例,这篇文章主要给大家介绍了关于Vue3中Provide / Inject的实现原理,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-02-02
  • vue3 ref 和reactive的区别详解

    vue3 ref 和reactive的区别详解

    本文主要介绍了vue3 ref 和reactive的区别详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-03-03

最新评论