首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >vite2 + vite.config.js 比较坑的环境变量,vite2模式的使用

vite2 + vite.config.js 比较坑的环境变量,vite2模式的使用

作者头像
用户1174620
发布2021-11-24 10:00:12
1.3K0
发布2021-11-24 10:00:12
举报

想在vite.config.js 里面判断一下环境,看看是不是开发环境,查了一下官网(https://cn.vitejs.dev/guide/env-and-mode.html),说是 可以使用 import.meta.env.DEV 。

但是在 vite.config.js 里面直接写 import.meta.env.DEV 的时候 ,运行时却报错了。

各种查了之后,发现要折腾一下。

import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'

const project = ({ mode }) => {
  return defineConfig({
    plugins: [vue()],
    base: loadEnv(mode, process.cwd()).DEV ? './':'nf-rollup-webstorage',
  })
}

export default project

这样折腾之后,虽然不报错了,但是 base 好像不太对劲的样子。测试了一番之后发现,根本没有读取出来。

模式

又继续看,发现了一个叫做“模式”的东东,简单的说,我们可以在项目根目录里面设置 .env.xxx 的文件,来存放不同模式的配置文件。

既然这样的话,干脆就用模式的方式吧。 因为我的项目有三个模式:开发模式,生产模式,库项目。

前两个都是常规模式,只是base不一致,后面的库项目,是因为想作为资源包发包发布到npmjs.com里面去。

修改 vite.config.js

首先建立三个文件:.env、.env.project、.env.lib 分别写入下面的内容,注意要分开写。

VITE_BASEURL=./
VITE_BASEURL=lib
VITE_BASEURL=nf-rollup-webstorage

然后把vite.config.js改成这样:

import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path' // 主要用于alias文件路径别名
const pathResolve = (dir) => resolve(__dirname, '.', dir)

// 发布库的设置
const lib = defineConfig({
  plugins: [vue()],
  // 打包配置
  build: {
    lib: {
      entry: resolve(__dirname, 'lib/main.js'),
      name: 'nf-web-storage',
      fileName: (format) => `nf-web-storage.${format}.js`
    },
    sourcemap: true,
    rollupOptions: {
      // 确保外部化处理那些你不想打包进库的依赖
      external: ['vue', 'nf-tool'],
      output: {
        // 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量
        globals: {
          vue: 'Vue',
          'nf-tool': 'nfTool'
        }
      }
    }
  }
})

// 开发模式、生产模式
const project = (url) => {
  return defineConfig({
    plugins: [vue()],
    devtools: true,
    resolve: {
      alias: {
        '/@': resolve(__dirname, '.', 'src'),
        '/nf-web-storage': pathResolve('lib/main.js') //
      }
    },
    base: url,
    // 打包配置
    build: {
      sourcemap: true,
      outDir: 'distp', //指定输出路径
      assetsDir: 'static/img/', // 指定生成静态资源的存放路径
      rollupOptions: {
        output: {
          chunkFileNames: 'static/js1/[name]-[hash].js',
          entryFileNames: 'static/js2/[name]-[hash].js',
          assetFileNames: 'static/[ext]/[name]-[hash].[ext]'
        },
        brotliSize: false, // 不统计
        target: 'esnext', 
        minify: 'esbuild' // 混淆器,terser构建后文件体积更小
      }
    }
  })
}

// 判断类型,返回对应的 defineConfig
 
export default ({ mode }) => {
  const url = loadEnv(mode, process.cwd()).VITE_BASEURL
  switch (url) {
    case 'lib': // 打包库文件
      return lib
      break;
    
    default: // 开发模式、生产模式
      return project(url)
      break;
  }
}

修改 package.json

模式和 vite.config.js 都设置好了,那么如何使用呢?我们需要改一下 package.json 的 script

 "scripts": {
    "dev": "vite",
    "build": "vite build --mode project",
    "lib": "vite build --mode lib",
    "serve": "vite preview"
  }

然后输入对应命令即可。

yarn dev // 开发模式
yarn build // 发布项目
yarn lib // 发布库

以前各种改 vite.config.js ,现在就不用改文件了。

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 模式
  • 修改 vite.config.js
  • 修改 package.json
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档