第二十六篇 - 打包Vue项目实现外网访问

参考链接：https://blog.csdn.net/qq_45774406/article/details/138768624

一、修改Vue的访问网址

二、修改devServer

三、在vue的根目录下运行npm run build进行打包

关闭tomcat，把dist拷贝到Tomcat的webapp路径下命令为front

开启Tomcat，页面空白

修改vue.config.js

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  publicPath:'./',
  assetsDir:'./',
  devServer:{
    disableHostCheck:true,
    port: 8080
  },
  configureWebpack: {
    //警告 webpack 的性能提示
    performance: {
      hints:'warning',
      //入口起点的最大体积
      maxEntrypointSize: 50000000,
      //生成文件的最大体积
      maxAssetSize: 30000000,
      //只给出 js 文件的性能提示
      assetFilter: function(assetFilename) {
        return assetFilename.endsWith('.js');
      }
    }
  }

})

 

之后，发现图标变成了Vue的图标，不过页面还是未显示，接着将路由由createWebHistory更新为createWebHashHistory作为临时解决方案，另一个方案是去改Tomcat配置，暂时没做

 然后开启Tomcat，发现能正常访问Vue并且能登录成功，前后端均可访问，大功告成。