问题产生的原因:1.用vite进行项目构建。2.部分使用的是以前迁移过来的vue2的代码。3.npm及node更新版本之后出现的区别。

问题1:process.env找不到(process is not defined)

问题描述:在vue2中可以使用process.env,但vue3中不再使用。
问题解决:在vite.config.js中添加define: { 'process.env': {} },即可解决
图片

参考https://blog.csdn.net/henryhu712/article/details/117897998


问题2:require找不到

问题描述:js文件中使用const path = require('path');时,require找不到。
问题解决1npm install @types/node --save-dev
问题解决2:在这一处具体问题处,可以把const path = require('path');换成import path from "path"
问题原因:并不百分百确定,但我认为可以采信的原因是因为vue3的环境都是ts的环境了,而require需要的node环境,所以切换到vue3之后无法直接使用。虽然在vite创建项目的时候,我选的是js而不是ts,但是vue3本身是ts重构过了的。如果你本身创建项目时使用的就是ts,那么有网友称还需要配置tsconfig.json,在里面加入

{
    "compilerOptions": {
    	// ...
        "types": ["node"],
        // ...
}

参考https://blog.csdn.net/qq_31393401/article/details/86235923

https://blog.csdn.net/qq_38735649/article/details/95939794

问题3:resolve.alias路径别名的使用

问题描述:使用vite.config.js使用alias提示应使用resolve.alias
问题解决:

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

图片
在这里插入图片描述
补充:这一步要实现,需要导入path,也即import path from "path"

参考https://blog.csdn.net/yusirxiaer/article/details/115440738


问题4:vite.config.js中export default显示为灰色,提示unused export default

问题描述:如题
问题解决:没有关系,实际生效了,如果没生效项目重启一下。可以通过修改配置的server的port来观察启动接口有没有改变从而判断vite.config.js有没有启用。

GitHub 加速计划 / vu / vue
207.55 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:2 个月前 )
73486cb5 * chore: fix link broken Signed-off-by: snoppy <michaleli@foxmail.com> * Update packages/template-compiler/README.md [skip ci] --------- Signed-off-by: snoppy <michaleli@foxmail.com> Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 5 个月前
e428d891 Updated Browser Compatibility reference. The previous currently returns HTTP 404. 5 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐