vite-vue3打包后,页面空白,报错process is not defined

在这里插入图片描述
只有在vite.config.js使用了,如下:

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

import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import path from 'path'

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        vue(),
        createSvgIconsPlugin({
            // 指定需要缓存的图标文件夹
            iconDirs: [path.resolve(process.cwd(), 'src/icon/svg')],
            // 指定symbolId格式
            symbolId: '[name]',
        })
    ],
    resolve: {
        alias: {
            '~': path.resolve(__dirname, './'),
            '@': path.resolve(__dirname, 'src'),
        }
    },
    server: {
        proxy: {
            '/api': {
                target: 'http://2773c7b5.op', //接口域名
                changeOrigin: true, //是否跨域
                ws: false, //是否代理 websockets
                // secure: true,                   //是否https接口
                rewrite: path => path.replace(/^\/api/, '') //路径重置
                    // pathRewrite: {                  //路径重置
                    // 	'^/api': ''
                    // }
            }
        }
    }
})

删除vite-plugin-svg-icons后,更改如下,仍报错:(全局都已经没有process了,但仍旧报错)

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

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        vue(),
    ],
    resolve: {
        alias: {
            '~': path.resolve(__dirname, './'),
            '@': path.resolve(__dirname, 'src'),
        }
    },
    server: {
        proxy: {
            '/api': {
                target: 'http://2773c7b5.op', //接口域名
                changeOrigin: true, //是否跨域
                ws: false, //是否代理 websockets
                // secure: true,                   //是否https接口
                rewrite: path => path.replace(/^\/api/, '') //路径重置
                    // pathRewrite: {                  //路径重置
                    // 	'^/api': ''
                    // }
            }
        }
    }
})

最后发现是path的原因
vue3不需要使用@来替代src路径,
所以更改如下:

import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        vue(),
    ],
    // define这部分应该可以删除,但是我没删,也不报错了
    define: {
        'process.env': process.env
    },
    server: {
        proxy: {
            '/admin': {
                target: 'http://shipin.jianjimall.cn/', //接口域名
                changeOrigin: true, //是否跨域
                ws: false, //是否代理 websockets
                // secure: true,                   //是否https接口
                // rewrite: path => path.replace(/^\/api/, '') //路径重置
                pathRewrite: { //路径重置
                    '^/admin': ''
                }
            }
        }
    },
})

原本其他部分引入的是:

import { addUser } from '@/api/user.js'//接口

更改后:

import { addUser } from '/src/api/user.js'//接口

如果改了vite.config.js还报错process is not defined,请全局搜索process和path,并更改

### Vue3Vite运行或打包时出现的`process is not defined`错误解决方案 在Vue3Vite项目中,当运行或打包时遇到`Uncaught ReferenceError: process is not defined`错误时,通常是因为Vite默认不支持Node.js全局变量(如`process`),而项目代码或某些依赖库中仍然使用了这些变量。以下是解决该问题的详细方法: #### 1. 配置Vite以支持`process.env` 可以在`vite.config.js`文件中添加`define`配置项,将`process.env`映射到实际环境变量。通过这种方式,Vite会在构建时替换掉`process.env`,从而避免运行时报错。 ```javascript import { defineConfig } from 'vite'; export default defineConfig({ define: { 'process.env': process.env, // 替换全局变量process.env }, }); ``` 这种方法适用于需要简单兼容`process.env`的场景[^4]。 #### 2. 替换代码中的`process.env`调用 如果项目中直接使用了`process.env`,可以考虑将其替换为Vite推荐的环境变量加载方式。例如,使用`.env`文件定义环境变量,并通过`import.meta.env`访问它们。 - 在项目根目录下创建`.env`文件: ``` VITE_BASE_URL=/my-base-url/ ``` - 在代码中使用`import.meta.env`替代`process.env`: ```javascript const baseUrl = import.meta.env.VITE_BASE_URL; ``` 这种方式不仅解决了`process is not defined`的问题,还更好地遵循了Vite的设计理念[^4]。 #### 3. 修改路由配置中的`process.env`引用 如果错误出现在路由配置中(例如`vue-router`的`createWebHistory`方法),可以将`process.env.BASE_URL`替换为静态值或动态计算值。 ```javascript import { createRouter, createWebHistory } from 'vue-router'; const router = createRouter({ history: createWebHistory('/'), // 替换 process.env.BASE_URL 为 '/' routes: [...], }); ``` 此方法特别适合解决路由配置中的`process is not defined`问题[^3]。 #### 4. 使用Polyfill引入`process` 对于某些无法修改的第三方库,可以通过安装`vite-plugin-node-polyfills`插件来引入`process`全局变量。 - 安装插件: ```bash npm install vite-plugin-node-polyfills --save-dev ``` - 在`vite.config.js`中配置插件: ```javascript import { defineConfig } from 'vite'; import nodePolyfills from 'vite-plugin-node-polyfills'; export default defineConfig({ plugins: [ nodePolyfills({ globals: { process: true } }), // 引入 process 全局变量 ], }); ``` 这种方法适用于依赖库中广泛使用`process`的情况[^1]。 #### 5. 检查并更新依赖库 某些旧版依赖库可能仍然依赖`process`或`require`等Node.js全局变量。建议检查项目的依赖树,寻找可能导致问题的库,并尝试升级到兼容ES模块的版本。 如果无法升级依赖库,可以结合上述Polyfill方法解决问题[^2]。 --- ### 示例代码 以下是一个完整的`vite.config.js`示例,结合了`define`和`vite-plugin-node-polyfills`的配置: ```javascript import { defineConfig } from 'vite'; import vue from '@vitejs/plugin-vue'; import nodePolyfills from 'vite-plugin-node-polyfills'; export default defineConfig({ plugins: [ vue(), nodePolyfills({ globals: { process: true } }), // 引入 process 全局变量 ], define: { 'process.env': process.env, // 替换全局变量 process.env }, }); ``` ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值