“基于vue-cli 打包时抽离项目相关配置文件”的攻略分为以下几个步骤:
“基于vue-cli 打包时抽离项目相关配置文件”的攻略分为以下几个步骤:
- 创建一个
.env.[mode]
文件
在根目录中创建一个名为 .env.[mode]
的文件,其中 [mode]
表示你的应用程序的模式,比如开发模式可以是 .env.development
,生产模式可以是 .env.production
。
在这个文件中,可以定义一些环境变量,比如 VUE_APP_API_BASE_URL=http://api.example.com
。这些变量会在打包时自动加到应用的 process.env
中,可以在应用中直接使用。
- 在项目根目录中新建相应的
.env.[mode].local
文件
这一步是可选的,如果你想在某些情况下修改某个配置变量,可以在对应的 .env.[mode].local
文件中修改。这个文件会覆盖相应的 .env.[mode]
文件中的变量,比如你可以在 .env.development.local
中修改 VUE_APP_API_BASE_URL
的值。
- 使用不同的模式打包应用
在打包应用时,可以通过设置 NODE_ENV
环境变量来指定应用的模式,比如 NODE_ENV=production npm run build
表示在生产模式下打包应用。
在打包时,vue-cli 会自动加载 .env.[mode]
和 .env.[mode].local
中的环境变量,并将它们加入到应用程序的 process.env
中。
- 分离配置文件
如果希望进一步抽离配置文件,可以使用 webpack 的 DefinePlugin
插件将 .env
文件中的变量加入到应用程序的全局变量中,比如将 VUE_APP_API_BASE_URL
加入到 window.__CONFIG__
对象中。
在 vue.config.js
中,可以通过 configureWebpack
配置对象中的 plugins
属性来添加 DefinePlugin
插件。
示例一:
以下是一个 .env.local
文件的示例:
VUE_APP_API_BASE_URL=http://localhost:3000
这个文件中定义了一个名为 VUE_APP_API_BASE_URL
的环境变量,用于指定应用程序的 API 基本 URL。在 .env.local
文件中,这个 URL 指向本机的一个开发服务器。
示例二:
以下是一个 configureWebpack
配置对象的示例:
module.exports = {
configureWebpack: {
plugins: [
new webpack.DefinePlugin({
'window.__CONFIG__': JSON.stringify(process.env),
}),
],
},
};
这个配置对象中使用了 webpack 的 DefinePlugin
插件,将所有的环境变量加入到了 window.__CONFIG__
对象中。这样,在应用程序中就可以使用 window.__CONFIG__
对象来访问环境变量。
本文标题为:基于vue-cli 打包时抽离项目相关配置文件详解
基础教程推荐
- 第3天:定义语言编码 2022-11-04
- CSS实现两个元素相融效果(粘滞效果) 2024-04-07
- 探究background-position属性中的百分比值的使用 2023-12-20
- React中完整实例讲解Recoil状态管理库的使用 2023-07-10
- Uncaught TypeError: Cannot read properties of undefined (reading ‘install‘)报错 2022-11-02
- css中子元素设置margin-top为什么影响了父元素 2023-12-20
- 探讨vertical-align应用 2022-10-16
- Express 框架中使用 EJS 模板引擎并结合 silly-datetime 库进行日期格式化的实现方法 原创 2023-07-09
- 基于fileUpload文件上传带进度条效果的实例(必看) 2023-02-14
- 利用location.hash实现跨域iframe自适应 2024-02-08