SSM+Vue前后端分离项目部署腾讯云服务器的若干坑

1.访问服务器index.html页面报404，访问静态文件css,js等报404

1.1找不到首页

在访问的URL中加上tomcat/webapps下你部署的项目文件名 路径格式为 http://IP:Port/项目名/dist/index.html

1.2css，js报404

1.2.1有可能是没有配springmvc的配置文件不对静态资源处理

<!--    让mvc不处理静态资源-->
<mvc:default-servlet-handler/>

1.2.2 vue配置静态文件路径

见3.2配置vue.config.js文件配置静态资源路径和输出文件目录

2.tomcat无法启动或关闭

经常是配置文件server.xml文件中的配置错误

3.前后端跨域问题

3.1后端设置

在使用 Spring Boot 做服务端，做前后端分离的项目时候，难免会出现跨域的问题，这里我使用spring 自带注解去解决跨域问题@CrossOrigin 在每个类上面加上这个注解，或者使用 CorsFilter 去解决，这里我说一下使用 @CrossOrigin等一些问题，@CrossOrigin(origins = “*") 这里在本地访问是没有一点问题，可以进行跨域访问，但是一部署到服务器上面就立马抛出了 跨域访问的异常，访问就是不能通过，在一查资料发现， 在方法名前增添如下设置后，发现成功了

@CrossOrigin(origins = "*",allowCredentials = "true",allowedHeaders = "*")

3.2前端设置

vue-cli4 配置生产环境文件(txt文本文件就可以)，默认把项目名加上即可，如ssm项目

NODE_ENV:’production‘
VUE_APP_BASE_URL="/ssm"

配置开发环境

NODE_ENV:’development‘
VUE_APP_BASE_URL="/api"

配置开发环境代理(注意设置静态资源)

//vue.config.js
module.exports = {
          
   
    publicPath: "./",
    // 输出文件目录
    outputDir: "dist",
    // 静态资源存放的文件夹(相对于ouputDir)
    assetsDir: "assets",
    // eslint-loader 是否在保存的时候检查(果断不用，这玩意儿我都没装)
    lintOnSave: false,
    // 我用的only，打包后小些
    // compiler: false,//有
    productionSourceMap: true, // 不需要生产环境的设置false可以减小dist文件大小，加速构建
    // css相关配置(我暂时没用到)
    // css: {
          
   
    // 是否使用css分离插件 ExtractTextPlugin
    // extract: true,
    // 开启 CSS source maps?
    // sourceMap: false,
    // css预设器配置项
    // loaderOptions: {},
    // 启用 CSS modules for all css / pre-processor files.
    // modules: false
    // },
    // webpack-dev-server 相关配置
    devServer: {
          
   
        host:127.0.0.1,
        // 项目启动端口之后会变成3000
        port: 9527,
        proxy: {
          
   
            /api: {
          
   
                target: http://127.0.0.1:8080,//开发时用于后端
                // 在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
                changeOrigin: true,
                // ws: true,
                pathRewrite: {
          
   
                    ^/api: /
                    // 替换target中的请求地址，也就是说以后你在请求http://api.jisuapi.com/XXXXX这个地址的时候直接写成/api即可
                }
            }
        }
    }
}

js请求样例

url:process.env.VUE_APP_BASE_URL+/book/allbook

4.本地sql正常，服务器报sql错误

检查数据库配置文件是否和服务器上的数据库一致，如用户名，密码，数据库名等。