项目开发完成，接下来是上线，关于vue项目的部署，我司前端是部署在nginx服务器上，关于nginx的相关文档，请自行查阅；本文只记录部署时碰到的一些问题。
vue项目打包后，是生成一系列的静态文件，包括项目的请求IP都打入包内，如果后台服务改动，这时你的前端文件，又要重新编译打包，这里采用的是后台管理项目总结提到的前端自行请求一个配置文件，动态修改你的相关配置。
// config.json
{
"api": "test.com"
}
在项目store中请求你的配置文件，写入state中，在调用的时候可以全局访问到你的配置
// api.js
GetConfigApi() {
return new Promise((resolve, reject) => {
axios
.get(`/config.json?v=${new Date().getTime()}`)
.then(result => {
const configApi = {
API: result.data['api'], // 统一接口
};
resolve(configApi);
})
.catch(error => {
reject(error);
});
});
}
因为vue-router有hash和history不同的两种模式，使用不同的模式，nginx的配置不同，hash模式下，不需要改动，只需要部署你的前端文件就可以了，所以这里只讨论history模式下.conf文件的修改
访问修改nginx配置文件nginx.conf
nano /etc/nginx/nginx.conf
server {
listen 80 default_server;
listen [::]:80 default_server;
server_name _;
root /usr/share/nginx/html;
# Load configuration files for the default server block.
include /etc/nginx/default.d/*.conf;
location / {
}
error_page 404 /404.html;
location = /40x.html {
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
}
}
修改后
server {
listen 80;
server_name test.com;
location / {
root /front;
index index.html;
try_files $uri $uri/ /index.html;
}
location ~ .*\\\\.(html)$ {
add_header Cache-Control no-store;
add_header Pragma no-cache;
}
}
注释：
server {
listen 80;
server_name test.com;
location / {
root /front; // 前端文件路径
index index.html; // hash模式只配置访问html就可以了
try_files $uri $uri/ /index.html; // history模式下
}
location ~ .*\\\\.(html)$ { // 对html文件限制缓存
add_header Cache-Control no-store; // 不缓存
// 或者用add_header Cache-Control no-cache;替代上面那一句，协商缓存
add_header Pragma no-cache;
}
}
location / {
root /home/dist;
try_files $uri $uri/ @router;
index index.html;
}
location / {
root /users/gaohanghang/dist;
try_files $uri $uri/ @router;
index index.html;
}
修改完成，使用以下命令重启 nginx 服务
nginx -s reload
访问 ip 地址，如 http://localhost