【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': {} },即可解决 图片： 参考：blog.csdn.net/henryhu712/…

问题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"],
        // ...
}

参考：blog.csdn.net/qq_31393401/article/details/86235923 blog.csdn.net/qq_38735649…

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

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

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

图片： 补充：这一步要实现，需要导入path，也即import path from "path"

参考：blog.csdn.net/yusirxiaer/…

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

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