Vue CLI中使用webpack的多模式和环境变量

在vue项目中我们根据不同的环境去打不同的包， 如测试环境，开发环境， 正式环境 这个时候我们可以使用webpak中的模式和环境变量来操作

可以用于配置各个环境的api地址

环境变量和模式

在vue项目中创建 

.env.development 和  .env.production 文件

.env.production

  

   

    

     

    
    

     

      NODE_ENV=production
     
    
   

    

     

    
    

     

      VUE_APP_TITLE=My App (production)
     
    
  
 

.env.development

  

   

    

     

    
    

     

      NODE_ENV=development
     
    
   

    

     

    
    

     

      VUE_APP_TITLE=My App (development)
     
    
  
 

配置执行脚本

"serve": "vue-cli-service serve --mode development",
 

在组件里直接获取变量 打印出来

  

   

    

     

    
    

     

      <script>
     
    
   

    

     

    
    

     

      export default {
     
    
   

    

     

    
    

     

        mounted () {
     
    
   

    

     

    
    

     
    console.log(process.env.VUE_APP_TITLE)
     
    
   

    

     

    
    

     

        }
     
    
   

    

     

    
    

     

      }
     
    
   

    

     

    
    

     

      </script>
     
    
  
 

运行  npm run serve  

打印 

My App (development)

文章来源: fizzz.blog.csdn.net，作者：拿我格子衫来，版权归原作者所有，如需转载，请联系作者。

原文链接：fizzz.blog.csdn.net/article/details/104706800