【VUE】process.env,require,vite.config.js等问题的解决
问题产生的原因: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找不到。
问题解决1:npm 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有没有启用。
更多推荐
所有评论(0)