vue项目打包抽离项目配置文件

vue项目打包抽离项目配置文件

每次项目打包生成静态文件后，若后台服务ip发生改动，则需要前端调整重新编译打包，特变麻烦，所以，上午查找资料，实现动态相关配置

新建项目配置文件
在static文件夹下新建配置文件config.js，并将配置项添加window对象上。
window.conf={
apiUrl:'http://198.168.9.10'//服务地址
}

image.png

项目中使用window对象

image.png

在index.html添加配置文件引用，实现分离配置文件目的。

image.png

此时运行npm run build打包编译后如下，可以动态修改config.js的地址

image.png

---

nginx部署

vue-router有两种不同模式：history及hash模式。hash模式不需要修改nginx.conf,但history模式需要修改nginx.conf如下形式，否则会访问不了。

    server {
        listen       80;
        server_name  192.168.43.219;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   html; // 前端文件路径
            index  index.html index.htm; //hash模式只要配置这步就行
        try_files $uri $uri/ /index.html; //history模式
        }
}

参考文档
https://zhuanlan.zhihu.com/p/88603137
http://bbs.learnfuture.com/topic/1694
https://www.jianshu.com/p/d0a3a40b5470