项目部署
本项目采用nginx进行部署,历史模式的部署需要服务端的配合,本次采用nginx进行配合。
1 配置
bash
const basePath = process.env.VUE_APP_BASE_PATH;
module.exports = {
publicPath: basePath #静态资源的路径 /ecology/
}
2 创建路由
bash
const createRouter = baseRouter => {
const router = new VueRouter({
#/ecology
base: baseRouter || process.env["VUE_APP_BASE_PATH"].slice(0, -1),
mode: "history",
routes: [...constantRoutes, ...asyncRoutes]
});
return router;
};
3 nginx配置
bash
location /ecology {
root html;
index index.html index.htm;
#这个配置的含义为:当请求到这个路径下面时/ecology/main/overview 会首先去这个路径下访问index.html如果有则返回这个静态资源
#如果没有 继续向后匹配 nginx内部重新定向到 /ecology/indexl.html 这样的话就相当于重定向到了首页,此时携带了路径参数/main/overview,就会触发vue路由的工作。其实这样也可以只写/ecology/index.html就已经完全足够。
try_files $uri $uri/ /ecology/index.html;
}
http://11.2.19.11:8088/ecology/main/overview
$uri:/ecology/main/overview
$request_uri:http://11.2.19.11:8088/ecology/main/overview
try_files: 官方文档
特别注意的是:静态资源路径,路由路径和nginx Location的路径一定要保持一致。