tomcat部署前端vue項目

1、將前端請求的后台的路徑改為后台tomcat的端口，由於我的后台部署在tomcat中，tomcat的端口為8081，故：

// 創建axios實例
const service = axios.create({
   baseURL: 'http://localhost:8081/api',
  timeout: 5000000
});

注意：如果部署到雲服務器中，那么就不能寫localhost,而應該寫雲服務器的ip。

2、config/index.js中的代碼如下：

'use strict'

const path = require('path')

module.exports = {
  dev: {
    // Paths
    assetsSubDirectory: 'static',
 assetsPublicPath: '/',


    host: 'localhost', // can be overwritten by process.env.HOST
    port: 9528, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
    autoOpenBrowser: true,
    errorOverlay: true,
    notifyOnErrors: false,
    poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
    useEslint: true,
    showEslintErrorsInOverlay: false,

    /**
     * Source Maps
     */

    devtool: 'cheap-source-map',

    cssSourceMap: false
  },

  build: {
    index: path.resolve(__dirname, '../dist/index.html'),

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

    assetsPublicPath: '/',


    productionSourceMap: false,
    devtool: 'source-map',

    productionGzip: false,
    productionGzipExtensions: ['js', 'css'],

    bundleAnalyzerReport: process.env.npm_config_report || false,

    generateAnalyzerReport: process.env.npm_config_generate_report || false
  }
}

3、前端用npm run build打包，生成dist目錄。在tomcat的webapp中新建ROOT目錄，將dist目錄下的文件拷貝到ROOT目錄中，設置tomcat端口為8081，啟動tomcat

4、訪問http://localhost:8082/

注意：本地筆記本訪問http://雲服務器IP:8082/,前端會訪問http://雲服務器IP:8081/，所以騰訊雲服務器要放開8081和8082兩個端口。

5、查看tomcat是否啟動成功的日志

tail -f logs/catalina.2021-12-15.out