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密钥、密码等)放在这里。对于敏感配置,应该使用环境变量或其他服务器端配置机制。