순수 초보 자 방향, vue + webpack + nginx 프로젝트 패키지 에서 온라인 프로 세 스 로

천 하 는 천만 원 을 배치 하고 모든 것 이 다 같 지 않 습 니 다. 다음은 제 개인의 배치 방법 일 뿐 입 니 다.초보 친 구 는 참고 만 하고 잘못 이 있 으 면 지적 해 주시 면 감사 하 겠 습 니 다!
우리 의 실제 프로젝트 개발 에 있어 여러 개의 배치 환경, 테스트 환경, 예비 발급 환경, 정식 환경 이 있 을 수 있 습 니 다.환경 마다 요청 URL 이 다 르 기 때문에 포장 할 때마다 수 동 으로 교체 하 는 것 이 번 거 로 우 므 로 다 중 환경 포장 을 설정 해 야 합 니 다.
1, cross - env 설치

npm install  cross-env --save

2, package. json 수정

"scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    //"build": "node build/build.js"       ,         ,            
    "build:test": "cross-env env_config=test node build/build.js",
    "build:prod": "cross-env env_config=prod node build/build.js"
},

3, build. js 수정

//1,  
// process.env.NODE_ENV = 'production'
....//      
const webpackConfig = require('./webpack.prod.conf')

//2,  
//const spinner = ora('building for production...')

//     ，       
const spinner = ora('building for ' + process.env.env_config);
spinner.start()

4. config 폴 더 아래 에 test. env. js 를 새로 만 들 고 prod. env. js 와 같은 이치 로 서로 다른 BaseURL 을 설정 합 니 다.
예 를 들 어 제 프로젝트 는 세 가지 환경, 하나의 개발, 하나의 로 컬 테스트 (당신 이 먼저 프로젝트 를 현지 에 배치 하 는 ngx 를 만 날 수 있 고 다른 사람 이 사용 하기에 편리 할 수 있 습 니 다), 하나의 온라인 생산, 다음은 하나의 예시 일 뿐 입 니 다.
a, 우선 dev. env. js 수정

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

module.exports = merge(dev, {
    NODE_ENV: '"development"',
    BASE_API: '"//192.168.31.164:8081"', //                ,              ,         webpack    
})

b. test. env. js 로 컬 패키지 파일 수정

'use strict'
const merge = require('webpack-merge')
const testEnv = require('./test.env');
module.exports = merge(testEnv, {
    NODE_ENV: '"test"', //  test         "build:test": "cross-env env_config=test node build/build.js",  test;
    BASE_API: '"//192.168.31.164:89"', //           ngx      ,ngx     89  
})

c, 온라인 생산 배치

'use strict'
module.exports = {
    NODE_ENV: '"production"',
    BASE_API: '"//mm.awsl.com"' //        ,                ,          nginx      ,                               ,             ip  (    ip,                  ip)
}

5, webpack. prod. config. js 수정

//const env = require('../config/prod.env')         ,       
const env = process.env.NODE_ENV = require(`../config/${process.env.env_config}.env`);

6. axios 를 사용 하면 main.js 에 baseURL 을 설정 하면 됩 니 다.

if (process.env.NODE_ENV == "development") { //       
  axios.defaults.baseURL = 'http:' + process.env.BASE_API + '/api';
} else { //      
  axios.defaults.baseURL = 'http:' + process.env.BASE_API;
}

7. 마지막 으로 포장 해서 사용 할 때 npm run build:test/prod 면 됩 니 다.
다음은 온라인 nginx 설정 입 니 다. 이 설정 은 2 개의 도 구 를 준비 해 야 합 니 다. 하나의 xftp (자원 파일 업데이트), 하나의 xshell (운영 서버) 을 설정 해 야 합 니 다.운영 동료 에 게 서버 에 대한 비밀번호, 로그 인 이름 을 요구 하고 xshell 에 로그 인하 거나 해 달라 고 하 세 요. 아무튼 xftp 와 xshell 이 먼저 서버 에 연결 되 어 있 습 니 다.
8. nginx 설정
일반적으로 nginx 는 두 가지 만 주의해 야 합 니 다. 하 나 는 ngx 프로젝트 의 자원 방지 위치 (경로) 입 니 다. 다른 하 나 는 프 록 시 전송 을 요청 하 는 설정 입 니 다. 우 리 는 ngx 에 대한 설정 은 모두 nginx.conf 이 폴 더 안에 있 습 니 다. 만약 에 서버 에 ngx 가 설치 되 어 있 지 않 으 면 먼저 ngx 를 설치 합 니 다.
우 분투 의 경우, 실행

sudo apt-get update
sudo apt-get install nginx

ngx 설치 가능;기본 적 인 상황 에서 /etc/nginx/ 이 경로 에 설치 되 어 있 습 니 다. 우리 가 주로 설정 해 야 할 nginx. conf 도 이 경로 에 있 습 니 다.
9. ngx. conf 파일 에 있 는 http 옵션 을 설정 합 니 다. 우리 의 프로젝트 설정 은 기본적으로 이 옵션 에 있 습 니 다.vim 작업 을 할 줄 안다 면 xhell 에서 직접 설정 명령 을 쓸 수 있 습 니 다. 익숙 하지 않 으 면 xftp 에서 이 파일 을 찾 을 수 있 습 니 다. 오른쪽 단 추 를 누 르 고 열기 방식 을 선택 하 십시오. 로 컬 기기 에 설 치 된 편집기 로 이 파일 을 편집 하고 ctrl + s 로 편집 하여 저장 하면 됩 니 다. vim 을 사용 하 는 것 과 같 습 니 다.

// ##             ,           ,        4    c  ,                   ip     
upstream webServer{      
    server 172.21.16.158:8080;
}
server {             
    listen 80;
    charset utf-8;
    //        4    c     `BASE_API`     ,    ip,     ip,      ,        ,         
    server_name mm.awsl.com; 
    location / {
        root /var/www/html/myApp/dist/; //                ,            mm.awsl.com:80        
        index index.html;
    }
    //         ,  (       )                ,  '/web/aa','/web/bb','/web/cc'    ,         '/web/'         'webServer'     ;              '/config/index'    'proxyTable'    ;
    location /web/ {
        #include uwsgi_params;
        proxy_pass http://webServer;
    }
}

위 는 하나의 시범 이다. 특별한 수요 가 없다 면 이렇게 배치 하면 될 것 이다. 적어도 나의 것 은 이렇다.
위의 설정 이 완료 되면 xshell 을 이용 하여 ngx 를 다시 시작 하면 됩 니 다.

nginx -c /etc/nginx/nginx.conf -s reload

이로써 당신 의 전체 프론트 데스크 톱 포장 온라인 프로 세 스 가 완료 되 었 습 니 다.다음은 브 라 우 저 에서 열 수 있 습 니 다 mm.awsl.com. 도 메 인 이름 을 설정 하지 않 았 다 면 설정 한 ip 을 사용 하 는 것 도 같은 효과 입 니 다.
이상 내용 로 컬 설정 부분 참조 주소
위 는 모두 제 가 처음으로 프로젝트 를 배치 한 전 절차 입 니 다. 당신 에 게 도움 이 되 기 를 바 랍 니 다. 만약 잘못 이 있 으 면 지적 해 주 셔 서 감사합니다.