vue-cli配置.env执行项目后自动同步static/config.js文件
- 下载dotenv依赖包，执行命令：
npm install dotenv
- 在根目录下创建.env文件，内容如下：
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>
扫一扫
852
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
