springboot+vue打包发布到tomcat服务器详细介绍

最近在写一个后台管理系统，后台用的是springboot，前台用的是vue+iview，打包发布到tomcat的时候遇到了不少坑，在这我有必要记录一下自己发布的过程，以便下次自己好复习。

先来看看后台代码注意的地方：

程序的启动类必须继承SpringBootServletInitializer并且覆盖其中的configure方法

@SpringBootApplication
@MapperScan("com.wky.dao.repository")
public class AdminApplication extends SpringBootServletInitializer {

    public static void main(String[] args) {
        SpringApplication.run(AdminApplication.class, args);
    }

    @Override
    protected SpringApplicationBuilder configure(SpringApplicationBuilder application) {
        return application.sources(AdminApplication.class);
    }

接下来去看pom.xml，增加依赖屏蔽自带的tomcat

 
        
            org.springframework.boot
            spring-boot-starter-tomcat
            compile
        

现在看看前台代码是如何配置的：

首先在config/index.js

 // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: './',
`
// Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: './',``

这个 assetsPublicPath: ‘./’,这个点是必须要的

在bulid/utils.js中主要代码如下：

if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader',
       publicPath: '../../'  //服务器上没有这个就会少静态样式
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }

可以看到增加了publicPath: ‘…/…/’，如果没有这个那么就会少了部分静态样式。

在router/index.js中注释掉 mode:‘history’,
base:__dirname,

/* mode:'history',
  base:__dirname,*/
  routes: [
    {path: '/', name: 'Login', component: Login},
    {path: '/home', name: 'Home',component: Home,

最后一步：在src/api/requestUrl.js中将
return (’/api’) + actionName;
修改为return (‘服务器地址/tomcat端口号/项目打包的名字’) + actionName;
比如：return (‘http://47.100.208.63:8080/hcx-admin’) + actionName;

运行 npm run build 命令后项目中多了一个dist文件，复制文件到桌面上，然后修改文件名字，比如我修改为hcx-vue，然后通过xftp6（我 比较喜欢这个软件，大家随意）发布到tomcat的webapps目录下

如图所示：

接下来将打包好的后台代码war包也放到这个目录，至于怎么打包不在这篇范围之内。

重新启动tomcat服务

然后我们直接请求：http://47.100.208.63:8080/hcx-vue（ip地址是假的）