008 区分开发和生产环境

区分developmen（开发的）和production（生产的）环境

 baseURL="服务器地址"

eg：coderwhy.dev/api/users/list       coderwhy.prod/api/users/list

　　coderwhy.dev/api/home/list        coderwhy.prod/api/home/list

• Vite 的环境变量：
• Vite 在一个特殊的 import.meta.env 对象上暴露环境变量。这里有一些在所有情况下都可以使用的内建变量：
  • import.meta.env.MODE: {string} 应用运行的模式。
  • import.meta.env.PROD: {boolean} 应用是否运行在生产环境。
  • import.meta.env.DEV: {boolean} 应用是否运行在开发环境（永远与 import.meta.env.PROD 相反）。
  • import.meta.env.SSR: {boolean} 应用是否运行在 server 上。
• Vite 使用 dotenv 从你的 环境目录 中的下列文件加载额外的环境变量：

  

  

   

   

• 只有以 VITE_为前缀的变量才会暴露给经过 vite 处理的代码。

 

 

 

 

这页这样写

 可以看到打印出来这个了

 

所以我们这里这样写

可以直接看到

 

 

现在我们来把他打包npm run build 

 打包成功后会出现文件夹dist

 

打包 完看一下 npm run preview 

 

点击登入可以看到

 

我们也可以看看这些值是什么

 可以看到

 

 

 

 

 

 

新建文件

 这里这样写

 这样我们就可以写在这里了

 可以看到，在这里多了一个值

 

要是这样写

 就可以看到

 

 

在建两个文件我们来看一下

 这三个

.env   不管开发环境还是生产环境都会都读

.env.development   只有在开发环境才会读

.env.production　　只有在生产环境才会读

 

这两个页面这样写

 这里打印看一下

 可以看到

 

当然也可以在后面加上.local

 区别就是不加.local的时候，整个页面是可以放到get仓库里面去的

加上.local的，就不会在服务器里面共享，不会放到get库里面（特别权限的东西，不让别人看的）只在自己本地电脑里面看到

 

我们可以看看这里的忽略文件