美文网首页前端开发那些事儿Vue技术每天学一点Vue3
vite2 + vite.config.js 比较坑的环境变量,

vite2 + vite.config.js 比较坑的环境变量,

作者: 自然框架 | 来源:发表于2021-11-21 19:35 被阅读0次

    想在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 ,现在就不用改文件了。

    相关文章

      网友评论

        本文标题:vite2 + vite.config.js 比较坑的环境变量,

        本文链接:https://www.haomeiwen.com/subject/ejjmtrtx.html