准备好SpringBoot和Vue项目
修改vue项目的配置文件
- 找到config/index.js文件,定位到 build 下,修改assetsPublicPath的值为
assetsPublicPath: './'
。
如图:加.
,不然的话会是空白页。
- 找到build/util.js文件,定位到 vue-style-loader ,在其后加一行:
publicPath: '../../'
,作用是保证字体、图片的正常使用。 - 把代理请求改掉,使用真实地址。我封装了axios,在创建axios实例的时候把原来本地的 /mypath 改成真实地址 http://127.0.0.1:9000。
const service = axios.create({ // baseURL: '/mypath', // api的base_url baseURL: 'http://127.0.0.1:9000', // api的base_url timeout: 100000// 请求超时时间 });
整合到SpringBoot中,并发布到Linux
-
Vue项目下执行
npm run build
,得到一个dist文件夹,下面有一个index.html文件和static文件夹,这个文件夹就是我们要发布的前端项目。如图:
-
把上一步得到的文件夹dist下的index.html文件和static文件夹放到SpringBoot项目中,位置是
resources\static
,如图:
-
打包SpringBoot项目,得到项目的jar包。(jar包在项目的target目录下)。上传jar包到Linux服务器上。运行项目,
命令:java -jar 你的项目.jar
。 请求地址,以实际为准 http://192.168.1.200:9000/。至此Vue项目已经整合到SpringBoot上了。