![](https://cdn.zimug.com/wx-zimug.png) ## 一、修改打包配置 我希望: * 在生产环境上,访问该前端应用就http://ip:port/dongbb * 在测试环境上,访问该前端应用就http://ip:port vue.config.js ![](https://img.kancloud.cn/a6/ca/a6cac0df1b0f1f07463536a85813797d_1189x257.png) 所以做这个配置,这个配置只做一次就可以了。 后端接口访问地址,api-axios的请求实例,请求地址配置(改成后端服务的实际地址).在src/api/index.js中 ~~~ export const jwtServerInstance = new HttpRequest("http://123.56.169.21:8201") ~~~ ## 二、打包 ~~~ npm run build ~~~ 打包结果多出一个dist文件夹,将该文件夹内的文件全部上传服务器,我选择的存放目录是:/usr/local/nginx/html/dongbb ![](https://img.kancloud.cn/2b/bb/2bbb65068aa955a55c0e008df60c9483_365x546.png) ## 三、配置nginx服务 vim /usr/local/nginx/conf/nginx.conf,下文红色边框是我新增的部分。 ![](https://img.kancloud.cn/c3/6b/c36b10d1b61a6e9ab514d25bb238748a_689x332.png) * server.root 表示以/usr/local/nginx/html作为项目的根路径 * location表示一个项目,location:/dongbb表示项目根目录下面的项目路径/dongbb * index.html表示项目入口 * `try_files $uri $uri/ /dongbb/index.html; `是一种相对特殊的用法,当你选择了vue路由的history模式,这个位置就需要这么配置。vue官方给出的方案。 配置修改完成后,nginx重新加载配置文件,生效。 ``` /usr/local/nginx/sbin/nginx -s reload ```