vue项目打包部署到与后台同一服务器上

打包前配置修改

• 将代理注释掉（同一服务器没有跨域问题不需要代理请求）
• 修改资源路径 publicPath为 “./”,

module.exports = {
  publicPath: "./",
  //outputDir: "dist", // 输出文件目录
  //assetsDir: "static", // 配置js、css静态资源二级目录的位置
  devServer: {
    open: true, //设置启动项目时默认打开浏览器
    // proxy: {
    //   "/api": {
    //     target: "http://192.168.0.102:8081",
    //     changeOrigin: true,
    //     pathRewrite: {
    //       "^/api": "",
    //     },
    //   },
    // },
  },
};

• 项目目录下创建 .env.development文件 和 .env.production 文件，添加需要请求的地址

VUE_APP_URL = "http://192.168.0.102:8081"

• 进入api接口请求文件，获取生产环境地址，并添加到所有接口中

 let baseUrl = process.env.VUE_APP_URL;

export async function login(params) {
   return await http.post(baseUrl+'/hbj/app/user/login.do',data(params))
}

打包生成dist文件

npm run build

• 将dist文件放到与后台项目同目录下( tomcat是在webapps中 )

• 重启tomcat服务

• 浏览器输入 ip+端口+dist ，就可以正常访问了。