vue 프로젝트 패키지 서버 에 배치 하 는 방법 예시

지난 편 에서 저 는 vue 프로젝트 가 Liux 서버 에 배 치 된 것 에 관 한 글 을 썼 습 니 다.그러나 그것 은 node 를 개발 환경 pm2 데 몬 으로 하 는 방식 으로 그 가 정상적으로 실행 할 수 있 도록 하 는 것 입 니 다.그러나 문제 가 발생 했 습 니 다.APP 와 상호작용 하 는 페이지 에 속 하기 때문에 webView 에서 너무 느리게 열 렸 고 APP 의 사용자 체험 이 매우 좋 지 않 았 습 니 다.그래서 저 는 자 료 를 찾 아 배치 방식 을 바 꾸 었 습 니 다.이제 제 가 소 개 를 해 드릴 게 요.
이번 에는 톰 캣 을 예 로 들 면
리 눅 스에 서 Tomcat 아래 의 디 렉 터 리 구 조 를 살 펴 보 겠 습 니 다.

vue-cli 로 만들어 진 비계 웹 팩 의 템 플 릿 아래/config/index.js 를 볼 수 있 습 니 다.여기 서 assets PublicPath 라 는 키 를 볼 수 있 습 니 다.그리고 두 번 더 있 습 니 다.중간 에 제 가 파 낸 구 덩이 는 말 하지 않 겠 습 니 다.여기 서 말 하고 자 하 는 것 은 아까 두 키 의 뒤에 한 번 씩 수정 하고 모두'./'를 추가 하 는 것 입 니 다.
여 기 를 왜 바 꿔 야 하 는 지 경로 문제 때문에 수정 하지 않 으 면 Tomcat 에 배치 하면 빈 페이지 가 생 길 수 있 습 니 다.
다음은 제 가 수정 한 config/index.js 설정 을 붙 여 드 리 겠 습 니 다.

'use strict'
// Template version: 1.1.3
// see http://vuejs-templates.github.io/webpack for documentation.

const path = require('path')

module.exports = {
 build: {
  env: require('./prod.env'),
  index: path.resolve(__dirname, '../dist/index.html'),
  assetsRoot: path.resolve(__dirname, '../dist'),
  assetsSubDirectory: 'static',
  assetsPublicPath: './',
  productionSourceMap: true,
  // 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
 },
 dev: {
  env: require('./dev.env'),
  port: process.env.PORT || 4000,
  autoOpenBrowser: true,
  assetsSubDirectory: 'static',
  assetsPublicPath: '/',
  proxyTable: {},
  // CSS Sourcemaps off by default because relative paths are "buggy"
  // with this option, according to the CSS-Loader README
  // (https://github.com/webpack/css-loader#sourcemaps)
  // In our experience, they generally work as expected,
  // just be aware of this issue when enabling this option.
  cssSourceMap: false
 }
}

모두 assets PublicPath 이 키 의 값"/"을 수정 하여"./"로 바 꾸 었 습 니까?
여기 서 나 는 또 내 가 중간 에 만난 구 덩이 를 들 고 싶다.
개발 모드 에서 proxy Table:{}을 설정 합 니 다.그 이 유 는 개발 할 때 앞 뒤 분리 도 메 인 문 제 를 해결 하기 위해 서 입 니 다.
여 기 는 보통 저희 가 이렇게 써 요.

dev: {
 env: require('./dev.env'),
 port: 4000,
 autoOpenBrowser: true,
 assetsSubDirectory: 'static',
 assetsPublicPath: '/',
 proxyTable: {
  '/api': {
   changeOrigin: true,
   target: 'http://192.168.0.116:8080',
   pathRewrite: {
    '^/api': ''
   }
  }
 },

기억 하 세 요.이렇게 쓰 는 것 은 개발 모델 을 개발 할 때 전후 분리 개발 을 편리 하 게 하기 위해 서 입 니 다.그러나 우 리 는 포장 할 때 반드시 이 부분 을 제거 해 야 합 니 다.같은 환경 과 포트 에서 크로스 도 메 인 문제 가 존재 하지 않 기 때 문 입 니 다.
제 가 포장 할 때 이 부분 을 뺐어 요.
proxyTable:{}
이 동시에 우 리 는 개발 모델 을 쓸 때 axios 를 쓸 때 인터페이스 앞 에'/api'를 추가 합 니 다.우 리 는 포장 하기 전에 똑 같이 제거 하고 백 엔 드 가 주 는 인터페이스 가 되 어야 서버 에 배치 할 때 인터페이스 경로 가 정확 합 니 다.
다음은 vue-router 를 수정 해 야 합 니 다.
vue 단일 페이지 응용 프로그램 은 대부분 이 vue-router 를 사 용 했 기 때문에 우리 도 일부 수정 을 해 야 합 니 다.src/router/index.js 에 물건 을 추가 해 야 합 니 다.예 를 들 어 아래 와 같 습 니 다.

export default new Router({
 mode : 'history',
 base: '/dist/', //     
 routes: [
  {
   path: '/',
   name: 'index',
   component: index
  }
 ]
})

그리고 npm run build 를 실행 하면 우리 가 포장 한 파일 dist 를 발견 할 수 있 습 니 다.이 포 장 된 파일 은 이 프로젝트 의 루트 디 렉 터 리 에 있 습 니 다.우 리 는 그 를 Tomcat 디 렉 터 리 에 있 는 WebApps 에 넣 고 도 메 인 을 넘 어 페이지 에 접근 할 수 있 습 니 다.
http://59.111.111.11:4000/dist/
비고:서버 의 포트 번 호 를 개통 하 는 것 을 기억 하 세 요.그렇지 않 으 면 방문 에 실 패 했 습 니 다.
주의해 야 할 것 은 그림 자원 이름 을 지 을 때 중국어 가 없어 야 합 니 다.중국어 로 는 서버 접근 이 그림 을 표시 하지 못 할 수 있 기 때 문 입 니 다.
Vue 프로젝트 가 서버 에 배치 되 는 문제 가 발생 하면 이 글 https://www.jb51.net/article/129750.htm 을 클릭 하면 해결 방법 을 찾 을 수 있 습 니 다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.