vue3 vite如何读取文件内容_Javascript

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
      }
    }
  }
})