VUE---vue tomcat 서버에 배포

하나.config-->index. 수정js 파일,build: {} 아래의 assetsPublicPath:'/', assetsPublicPath:'./', ---------첫 페이지 로드 공백 문제 해결

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

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

    /**
     * Source Maps
     */

    productionSourceMap: true,
    // https://webpack.js.org/configuration/devtool/#production
    devtool: '#source-map',

    // Gzip off by default as many popular static hosts such as
    // Surge or Netlify already gzip all static assets for you.
    // Before setting to `true`, make sure to:
    // npm install --save-dev compression-webpack-plugin
    productionGzip: false,
    productionGzipExtensions: ['js', 'css'],

    // Run the build command with an extra argument to
    // View the bundle analyzer report after build finishes:
    // `npm run build --report`
    // Set to `true` or `false` to always turn it on or off
    bundleAnalyzerReport: process.env.npm_config_report
  }

둘.tomcat-->webapps 디렉터리에 새 폴더를 만들려면router-->index를 만들어야 합니다.js 파일에 베이스 추가: '/폴더 이름/'

Vue.use(Router)

/*      */
const router = new Router({
  base: '/myczsrgl/',
  routes: [  
    {
        path: '/login',
        name: '  ',
        component: Login
    }
  ]
})

셋.일반적인 상황에서 정적 자원을 불러오는 데 실패하는 경우,build-->utils.js 파일에 코드 행 - -publicPath:'././',

    // Extract CSS when that option is specified
    // (which is the case during production build)
    if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        publicPath:'../../',   //publicPath    app.css index.html     
        fallback: 'vue-style-loader'
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }

넷.만약 개발 환경에서 크로스 인터페이스 호출이나 에이전트를 추가한 경우 생산 환경에서도 상응하는 수정이 필요하다
config--->dev.env.js 개발 환경 추가:APIROOT: '"/api"' 

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  API_ROOT: '"/api"'     //  API_ROOT
})

config--->prod.env.js 프로덕션 환경 추가:APIROOT: '"/api"' 

'use strict'
module.exports = {
  NODE_ENV: '"production"',
  API_ROOT: '"http://192.168.8.108:8088/MLFinanceManage"'
}

axios 호출 생성 시 코드 베이스URL:process 추가env.API_ROOT, 

//  axios  
var instance = axios.create({
  baseURL: process.env.API_ROOT,    //    
  timeout: 120000 ,//    60        
  // headers: { 'Content-Type': 'application/json;charset=UTF-8' }
  headers: { 'Content-Type': 'application/x-www-form-urlencoded' }  //post    
})

  //    
  userLogin(data){
      //             'api/login/login'        
      return instance.post('/login/login', qs.stringify(data))    
  },

오.마지막으로 npm runbuild을 포장하면 디스켓 디렉터리를 생성하여 이 폴더를tomcat-->webapps 디렉터리로 복사하고 두 번째 단계의 (base:'/폴더 이름/') 파일 이름으로 이름을 바꾸면 서비스를 시작할 수 있습니다.http://192.168.8.108:8088/myczsrgl)