vue部署到服务器(vue部署到服务器 如何获取到部署根目录)

1 在 Vue 项目中运行 npm run build 命令进行编译，生成 dist 目录2 将 dist 目录下的静态资源放在 Spring Boot 静态资源目录srcmainresourcesstatic下3 在 Spring Boot 中配置视图解析器，将请求 转。

当我们将 vue 项目完成后，面临的就是如何将项目进行打包上线，放到服务器中我使用的是 vueclisimple 脚手架，所以就讲一下如何将项目进行打包，并放到 tomcat 上如果是 vuecli 非 simple 脚手架，这篇文章。

二编写的内容 三修改路由方式，修改为hash，文件位置自己找，vuecli3中在routerts文件中 四添加空路由 找到编译好的文件夹，如果作为独立项目，直接拷贝后放到Tomcat里即可，如果是放到另外一个项目中。

解决方案首先需要服务器设置系统环境变量，在打包后部署到服务器，通过运行sh文件来获取环境变量set到项目中 以下是vue项目为例， React ，Angular 均可以使用 1，在项目根目录创建 runsh 文件 注解第一行 apiUrl为。

1先配置nginx2在路由中添加 注意如果是ts文件的话，如果默认有生成js的话要查看对应的js是否有加上目录，否则设置会无效3在文件中添加。

是因为程序自身的Bug导致页面加载异常利用路由的懒加载实现组件的按需加载，这样配置后只有当路由被访问时才会加载对应的组件，而不是在加载首页的时候就直接加载即可恢复。

既然提到了部署，默认的部署使用 npmcnpm 进行，如下命令，输出内容在 dist 目录可以使用参数来设置，得到符合不同需要的编译结果之后即可以将打包的文件部署到服务器上这里说下 vuecli 脚手架所带的图形界面编译。

ip8080Teststaticonejs Test路由的存在导致 onejs报404问题项目在构建dist时，路由配置的问题，找到Vue项目下 srcrouterindexjs文件，更改为如图方式重新 npm run build，将dist替换到服务器上，重新构建。