vue3 vite如何讀取文件內(nèi)容

更新時間：2024年05月23日 10:06:46 作者：мо仙堡杠把子ご灬

這篇文章主要介紹了vue3 vite如何讀取文件內(nèi)容問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

vue3 vite讀取文件內(nèi)容

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)$/);
// 根據(jù)文件名組織模塊對象
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配置環(huán)境變量

環(huán)境變量和模式 | Vite 官方中文文檔

1、環(huán)境變量

1.1、環(huán)境模式

.env                # 所有情況下都會加載
.env.local          # 所有情況下都會加載，但會被 git 忽略
.env.[mode]         # 只在指定模式下加載
.env.[mode].local   # 只在指定模式下加載，但會被 git 忽略

1.2、默認環(huán)境變量

import.meta.env.MODE: {string} 應用運行的模式
import.meta.env.BASE_URL: {string} 部署應用時的基本 URL
import.meta.env.PROD: {boolean} 應用是否運行在生產(chǎn)環(huán)境
import.meta.env.DEV: {boolean} 應用是否運行在開發(fā)環(huán)境 (永遠與 import.meta.env.PROD相反)

1.3、應用環(huán)境變量

.env文件：所有環(huán)境下都會加載
.env.development文件：開發(fā)環(huán)境
.env.production文件：生產(chǎn)環(huán)境

可以通過 import.meta.env.MODE === 'development' 進行判斷

VITE_APP_NAME = dist-icon

注意：變量名稱必須VITE_開頭

1.4、使用環(huán)境變量

// 判斷
const isProd = import.meta.env.MODE === 'production'
// 讀取
const appName = import.meta.env.VITE_APP_NAME

在項目中，根據(jù)項目業(yè)務和情況來配置環(huán)境變量。.env.development一般為默認，非測試或特定情況可不用配置

2、自定義環(huán)境變量

如果使用自定義配置環(huán)境變量，import.meta.env.MODE中的運行環(huán)境將變成自定義的環(huán)境，比如：import.meta.env.MODE：hbjt。

不再是用development或production來區(qū)分開發(fā)環(huán)境和生產(chǎn)環(huán)境。

要想在自定義環(huán)境變量中控制是開發(fā)環(huán)境還是生產(chǎn)環(huán)境，可以定義.env.projectName(生產(chǎn)環(huán)境)、.env.projectName-dev(開發(fā)環(huán)境)。

自定義變量 NODE_ENV = development 或者 ODE_ENV = production 來控制是否是生產(chǎn)環(huán)境

2.1、命名環(huán)境變量

.env.projectName(項目名稱)

一般應用場景：控制同一套框架下根據(jù)項目打包不同的業(yè)務、特定環(huán)境下的變量或環(huán)境地址

注意：.env文件中存儲默認的環(huán)境變量

2.2、使用環(huán)境變量

dev：啟動本地環(huán)境項目。
serve:projectName：啟動指定環(huán)境的本地項目

"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 ."
}

啟動指定環(huán)境項目后，才可以訪問到環(huán)境變量，否則默認取.env文件下環(huán)境變量
--mode projectName(項目名稱-可自行定義)

3、vite中使用環(huán)境變量

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