vue项目打包之后更改某些配置项

.env.development(开发环境)、.env.production(生产环境)和 .env.test(测试环境)等环境变量,一旦你运行了 npm run build 命令,环境变量的值就被固定下来了,你不能再直接更改 .env文件中的值来影响已经构建好的应用。但是有时候也需要修改某些配置项,而不是重新打包,因此需要另外的方法。

你可以在public文件夹下创建一个config.js文件,并在index.html中引入它,这样你的Vue应用就可以全局访问这个配置文件了。public文件夹下的文件在构建过程中不会被Webpack处理,而是会直接复制到构建目录(通常是dist)中,因此你可以直接在HTML文件中通过<script>标签引入。

config.js

// public/config.js  
export const config = {  
  apiUrl: 'https://api.example.com',  
  someOtherConfig: 'value'  
};

  index.html

<!-- public/index.html -->  
<!DOCTYPE html>  
<html lang="en">  
<head>  
  <meta charset="UTF-8">  
  <meta name="viewport" content="width=device-width, initial-scale=1.0">  
  <title>Your App</title>  
</head>  
<body>  
  <div id="app"></div>  
  <!-- 引入 config.js -->  
  <script src="./config.js"></script>  
</body>  
</html>

app.js或任何其他Vue组件中,你可以通过config对象直接访问,因为config.js被直接加载到了HTML中:

// app.js  
new Vue({  
  created() {  
    console.log(config.apiUrl); // 输出: https://api.example.com  
  },  
  // ...  
});

请注意,将配置信息放在public文件夹中意味着任何人都可以查看和修改config.js文件,因此不应将敏感信息(如API密钥、密码等)放在这里。对于敏感配置,应该使用环境变量或其他服务器端配置机制。

posted on 2024-03-06 11:29  技术高超  阅读(467)  评论(0编辑  收藏  举报