vue项目不用重新打包即可以修改项目ip

需求： 由于vue项目每次修改项目ip都需要重新打包，解决痛点：
方法： vue项目的dev.env.js配置文件引入外部变量

node中使用CommonJS规范引入 导出

static文件下新建host文件 static为暴露到外包的静态资源文件夹

/static/host/下的 dev.js

module.exports = {
    
    NODE_ENV: '"development"',
    PROJECT_NAME: '""', // 项目缩写
    TARGET: '"http://127.0.0.1:10001/port"', 
    ROUTE_PREFIX: '""', // 路由前缀
    
}
1
2
3
4
5
6
7
8

dev.env.js

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')
let  hostObj  =  require('../static/host/dev')  //这个文件
console.log(hostObj)

module.exports = merge(prodEnv, {
  ...hostObj
})
1
2
3
4
5
6
7
8
9

修改后存在的问题： ip作为静态资源外露，存在安全问题。使用时，保证部署安全再使用。