ReferenceError: __dirname is not defined

MandiGao

已于 2022-07-19 20:36:54 修改

阅读量4.4k

点赞数 1

分类专栏： vite 文章标签： vue.js 前端

于 2022-07-19 20:27:57 首次发布

本文链接：https://blog.csdn.net/qq_41999617/article/details/125880168

版权

vite 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

背景：vite 3.0.0 ,vue 3.2.37
在vite.config.js中配置别名

import path from 'path'
resolve: {
      alias: {
        '@': path.resolve(__dirname, './src')
      }
    },

运行：yarn dev 直接报错，错误如下：
在这里插入图片描述
正确代码：

import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import pxtovw from 'postcss-px-to-viewport'
import path from 'path'
import { fileURLToPath } from 'url'
const filename = fileURLToPath(import.meta.url) // 这里不能声明__filename,因为已经有内部的__filename了，重复声明会报错
const _dirname = path.dirname(filename)

export default ({ mode }) => {
  return defineConfig({
    plugins: [vue()],
    resolve: {
      alias: {
        '@': path.resolve(_dirname, './src')
      }
    },
    server: {
      proxy: {
        "/api": {
          target: loadEnv(mode, process.cwd()).VITE_APP_BASE_API,
          ws: true,
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/api/, "")
        },
      }
    },
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: '@import "./src/assets/css/global.scss";',
        }
      }
    }
  })
}