VUE-CLI配置自动生成环境变量

最新推荐文章于 2024-12-04 11:31:47 发布

yakult，

最新推荐文章于 2024-12-04 11:31:47 发布

阅读量562

点赞数

文章标签： vue

本文链接：https://blog.youkuaiyun.com/qq_39702506/article/details/103745522

版权

vue-cli配置.env执行项目后自动同步static/config.js文件

下载dotenv依赖包，执行命令：

npm install dotenv

WEB_SOCKET = '192.168.1.111'

在build文件夹下新建zpreface.js文件，内容如下：

const fs = require('fs')
const path = require('path')

const env = path.join(__dirname, '../.env')
const out = path.join(__dirname, '../static/config.js')

const script = function (env_file = env, out_file = out) {
  const {
    parsed
  } = require('dotenv').config({
    path: env_file
  })
  fs.writeFileSync(out_file, `window.zPreface = '${parsed.WEB_SOCKET}'`)
}

script();

module.exports = script

在static文件加下创建config.js，内容如下：

window.zPreface = '192.168.1.111'（此内容是根据.env自动生成，打包后可更改）

查看根目录下的package.json文件里的scripts/dev、build内容路径，如下图

找到dev、build路径下的文件写入以下代码：

require('./zpreface')()

最后一步，在index.html文件里引入static/config.js文件：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>mydemo</title>
    <script src="/static/config.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>