vue 多环境打包并支持动态修改

vue 多环境打包并支持动态修改

首先实现 开发环境与生产环境 配置

• 配置文件

let devConfig = {
    url:'http:xxxx',
    // xxxx
}
let produConfig = {
    url:'http:xxxx',
    // xxxx
}
let config = produConfig
if (process.env.NODE_ENV === 'development') {
    config = devConfig
}
// $1
export default config

此时 npm run build或dev 会根据NODE_ENV进行判断使用

• 如果有其他或更多配置文件 需要以下操作

  • 通package.json文件目录下新建 .env.xxx(您的配置名称)

    NODE_ENV = xxx(您的配置名称)
    

  • 并在package.json中加入scripts运行命令(这里是vuelic，如果有webapck或其他的用相应命令)

    "xxx": "vue-cli-service xxx",
    

  • 然后操作其上 $1

• 需求：打包后dist 需要动态设置配置文件

  • 同package.json目录:public->static->config.js(如果没有新建)

  

  • config就是配置文件，这样打包后dist会多出一个static文件夹并含有config.js（此时修改dist的中config.js是无效的）

  • 因为：通过以上方式，config.js是存在vue中的main.js文件的引用链中的，这样webpack会处理成一个js文件，所以修改外面的config.js文件不会影响打包后的js

​

可以看出config里的配置是被打包到app.xxx.map，这样你修改外层config.js 肯定是失效的

• 解决方法

  • 需要config.js 脱离 引用链

    var _$devConfig = {
        url:'',
        // xxxx
    }
    var _$produConfig = {
        url:'',
        // xxxx
    }
    

  • 通过html入口文件引入(尽量优先加载)

     <script src="./static/config.js"></script>
    

    注意:这里默认入口是public,可以从static开始引入

  • 引用判断

    let config = window._$produConfig
    if (process.env.NODE_ENV === 'development') {
        config = window._$devConfig
    }
    

  • 这样打包就会将public 的config.js 抛出，并webpack不会去处理

_$devConfig

}
```

• 这样打包就会将public 的config.js 抛出，并webpack不会去处理

• 此时修改dist中的config.js 是会实时替换的。