<span id="mktg5"></span>

<i id="mktg5"><meter id="mktg5"></meter></i>

        <label id="mktg5"><meter id="mktg5"></meter></label>
        最新文章專(zhuān)題視頻專(zhuān)題問(wèn)答1問(wèn)答10問(wèn)答100問(wèn)答1000問(wèn)答2000關(guān)鍵字專(zhuān)題1關(guān)鍵字專(zhuān)題50關(guān)鍵字專(zhuān)題500關(guān)鍵字專(zhuān)題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關(guān)鍵字專(zhuān)題關(guān)鍵字專(zhuān)題tag2tag3文章專(zhuān)題文章專(zhuān)題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專(zhuān)題3
        問(wèn)答文章1 問(wèn)答文章501 問(wèn)答文章1001 問(wèn)答文章1501 問(wèn)答文章2001 問(wèn)答文章2501 問(wèn)答文章3001 問(wèn)答文章3501 問(wèn)答文章4001 問(wèn)答文章4501 問(wèn)答文章5001 問(wèn)答文章5501 問(wèn)答文章6001 問(wèn)答文章6501 問(wèn)答文章7001 問(wèn)答文章7501 問(wèn)答文章8001 問(wèn)答文章8501 問(wèn)答文章9001 問(wèn)答文章9501
        當(dāng)前位置: 首頁(yè) - 科技 - 知識(shí)百科 - 正文

        Vue CLI 3.x 自動(dòng)部署項(xiàng)目至服務(wù)器的方法

        來(lái)源:懂視網(wǎng) 責(zé)編:小采 時(shí)間:2020-11-27 21:59:34
        文檔

        Vue CLI 3.x 自動(dòng)部署項(xiàng)目至服務(wù)器的方法

        Vue CLI 3.x 自動(dòng)部署項(xiàng)目至服務(wù)器的方法:前言 平時(shí)部署前端項(xiàng)目流程是:先部署到測(cè)試環(huán)境ok后再發(fā)布到生產(chǎn)環(huán)境上,部署到測(cè)試環(huán)境用 xshell 連上服務(wù)器,然后用 xftp 連接服務(wù)器,然后本地 build 項(xiàng)目,接著把 build 好的文件通過(guò) xftp 上傳到服務(wù)器上,整個(gè)流程感覺(jué)稍有繁瑣,重復(fù)。 本教程講解的
        推薦度:
        導(dǎo)讀Vue CLI 3.x 自動(dòng)部署項(xiàng)目至服務(wù)器的方法:前言 平時(shí)部署前端項(xiàng)目流程是:先部署到測(cè)試環(huán)境ok后再發(fā)布到生產(chǎn)環(huán)境上,部署到測(cè)試環(huán)境用 xshell 連上服務(wù)器,然后用 xftp 連接服務(wù)器,然后本地 build 項(xiàng)目,接著把 build 好的文件通過(guò) xftp 上傳到服務(wù)器上,整個(gè)流程感覺(jué)稍有繁瑣,重復(fù)。 本教程講解的

        前言

        平時(shí)部署前端項(xiàng)目流程是:先部署到測(cè)試環(huán)境ok后再發(fā)布到生產(chǎn)環(huán)境上,部署到測(cè)試環(huán)境用 xshell 連上服務(wù)器,然后用 xftp 連接服務(wù)器,然后本地 build 項(xiàng)目,接著把 build 好的文件通過(guò) xftp 上傳到服務(wù)器上,整個(gè)流程感覺(jué)稍有繁瑣,重復(fù)。

        本教程講解的是 Vue-CLI 3.x 腳手架搭建的vue項(xiàng)目, 利用scp2自動(dòng)化部署到靜態(tài)文件服務(wù)器 Nginx

        一 安裝scp2

        scp2是一個(gè)基于ssh2增強(qiáng)實(shí)現(xiàn),純粹使用JavaScript編寫(xiě)。

        而ssh2就是一個(gè)使用nodejs對(duì)于SSH2的模擬實(shí)現(xiàn)。scp,是secure copy的縮寫(xiě), scp是Linux系統(tǒng)下基于SSH登陸進(jìn)行安全的遠(yuǎn)程文件拷貝命令。這里我們就用這個(gè)功能,在Vue編譯構(gòu)建成功之后,將項(xiàng)目推送至測(cè)試/生產(chǎn)環(huán)境,以方便測(cè)試,提高效率。

        安裝scp2:

        npm install scp2 --save-dev

        二、配置測(cè)試/生產(chǎn)環(huán)境 服務(wù)器SSH遠(yuǎn)程登陸賬號(hào)信息

        1. 在項(xiàng)目根目錄下, 創(chuàng)建 .env.dev 文件 (測(cè)試環(huán)境變量)

        VUE_APP_SERVER_ID變量表示 當(dāng)前需部署的測(cè)試服務(wù)器ID為0

        // .env.dev文件中
        VUE_APP_SERVER_ID=0

        2. 在項(xiàng)目根目錄下, 創(chuàng)建 .env.prod 文件 (生產(chǎn)環(huán)境變量)

        VUE_APP_SERVER_ID變量表示 當(dāng)前需部署的生產(chǎn)服務(wù)器ID為1

        // .env.prod文件中
        VUE_APP_SERVER_ID=1

        3. 在項(xiàng)目根目錄下, 創(chuàng)建 deploy/products.js 文件

        /*
         *讀取env環(huán)境變量
         */
        const fs = require('fs');
        const path = require('path');
        // env 文件 判斷打包環(huán)境指定對(duì)應(yīng)的服務(wù)器id
        const envfile = process.env.NODE_ENV === 'prod' ? '../.env.prod' : '../.env.dev';
        // env環(huán)境變量的路徑
        const envPath = path.resolve(__dirname, envfile);
        // env對(duì)象
        const envObj = parse(fs.readFileSync(envPath, 'utf8'));
        const SERVER_ID = parseInt(envObj['VUE_APP_SERVER_ID']);
        function parse(src) {
         // 解析KEY=VAL的文件
         const res = {};
         src.split('\n').forEach(line => {
         // matching "KEY' and 'VAL' in 'KEY=VAL'
         // eslint-disable-next-line no-useless-escape
         const keyValueArr = line.match(/^\s*([\w\.\-]+)\s*=\s*(.*)?\s*$/);
         // matched?
         if (keyValueArr != null) {
         const key = keyValueArr[1];
         let value = keyValueArr[2] || '';
        
         // expand newlines in quoted values
         const len = value ? value.length : 0;
         if (len > 0 && value.charAt(0) === '"' && value.charAt(len - 1) === '"') {
         value = value.replace(/\\n/gm, '\n');
         }
        
         // remove any surrounding quotes and extra spaces
         value = value.replace(/(^['"]|['"]$)/g, '').trim();
        
         res[key] = value;
         }
         });
         return res;
        }
        /*
         *定義多個(gè)服務(wù)器賬號(hào) 及 根據(jù) SERVER_ID 導(dǎo)出當(dāng)前環(huán)境服務(wù)器賬號(hào)
         */
        const SERVER_LIST = [
         {
         id: 0,
         name: 'A-生產(chǎn)環(huán)境',
         domain: 'www.prod.com',// 域名
         host: '46.106.38.24',// ip
         port: 22,// 端口
         username: 'root', // 登錄服務(wù)器的賬號(hào)
         password: 'Rock@sz18!',// 登錄服務(wù)器的賬號(hào)
         path: '/mdm/nginx/dist'// 發(fā)布至靜態(tài)服務(wù)器的項(xiàng)目路徑
         },
         {
         id: 1,
         name: 'B-測(cè)試環(huán)境',
         domain: 'test.xxx.com',
         host: 'XX.XX.XX.XX',
         port: 22,
         username: 'root',
         password: 'xxxxxxx',
         path: '/usr/local/www/xxx_program_test/'
         }
        ];
        
        module.exports = SERVER_LIST[SERVER_ID];

        三、使用scp2庫(kù),創(chuàng)建自動(dòng)化部署腳本

        在項(xiàng)目根目錄下, 創(chuàng)建 deploy/index.js 文件

        const scpClient = require('scp2');
        const ora = require('ora');
        const chalk = require('chalk');
        const server = require('./products');
        const spinner = ora('正在發(fā)布到' + (process.env.NODE_ENV === 'prod' ? '生產(chǎn)' : '測(cè)試') + '服務(wù)器...');
        spinner.start();
        scpClient.scp(
         'dist/',
         {
         host: server.host,
         port: server.port,
         username: server.username,
         password: server.password,
         path: server.path
         },
         function (err) {
         spinner.stop();
         if (err) {
         console.log(chalk.red('發(fā)布失敗.\n'));
         throw err;
         } else {
         console.log(chalk.green('Success! 成功發(fā)布到' + (process.env.NODE_ENV === 'prod' ? '生產(chǎn)' : '測(cè)試') + '服務(wù)器! \n'));
         }
         }
        );

        四、添加 package.json 中的 scripts 命令, 自定義名稱(chēng)為 "deploy",

        發(fā)布到測(cè)試環(huán)境命令為 npm run deploy:dev,生產(chǎn)環(huán)境為 npm run deploy:prod

         "scripts": {
         "serve": "vue-cli-service serve --mode dev",
         "build": "vue-cli-service build --mode prod",
         "deploy:dev": "npm run build && cross-env NODE_ENV=dev node ./deploy",
         "deploy:prod": "npm run build && cross-env NODE_ENV=prod node ./deploy",
         },

        ps 這里用到了cross_env 得安裝 npm i --save-dev cross-env cross-env能跨平臺(tái)地設(shè)置及使用環(huán)境變量,這里用來(lái)設(shè)置是生產(chǎn)環(huán)境還是測(cè)試環(huán)境。

        圖解


        參考閱讀:Vue-CLI 3.X 部署項(xiàng)目至生產(chǎn)服務(wù)器的方法

        總結(jié)

        以上所述是小編給大家介紹的Vue-CLI 3.x 自動(dòng)部署項(xiàng)目至服務(wù)器,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!

        聲明:本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí),若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系,我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

        文檔

        Vue CLI 3.x 自動(dòng)部署項(xiàng)目至服務(wù)器的方法

        Vue CLI 3.x 自動(dòng)部署項(xiàng)目至服務(wù)器的方法:前言 平時(shí)部署前端項(xiàng)目流程是:先部署到測(cè)試環(huán)境ok后再發(fā)布到生產(chǎn)環(huán)境上,部署到測(cè)試環(huán)境用 xshell 連上服務(wù)器,然后用 xftp 連接服務(wù)器,然后本地 build 項(xiàng)目,接著把 build 好的文件通過(guò) xftp 上傳到服務(wù)器上,整個(gè)流程感覺(jué)稍有繁瑣,重復(fù)。 本教程講解的
        推薦度:
        標(biāo)簽: VUE 服務(wù)器 cli
        • 熱門(mén)焦點(diǎn)

        最新推薦

        猜你喜歡

        熱門(mén)推薦

        專(zhuān)題
        Top
        主站蜘蛛池模板: 午夜免费福利片观看| 一级女性全黄生活片免费看| 99久久人妻精品免费一区| 亚洲啪啪AV无码片| 中文字幕不卡高清免费| 亚洲日本乱码一区二区在线二产线| h在线看免费视频网站男男| 亚洲麻豆精品国偷自产在线91| 男男黄GAY片免费网站WWW| 亚洲欧洲久久av| 99精品视频免费| 亚洲永久中文字幕在线| 和日本免费不卡在线v| 亚洲乱亚洲乱妇24p| 国产三级免费观看| 久久不见久久见免费影院www日本| 国产亚洲欧洲Aⅴ综合一区 | 亚洲av综合日韩| 亚洲Aⅴ无码一区二区二三区软件 亚洲AⅤ视频一区二区三区 | CAOPORN国产精品免费视频| 亚洲线精品一区二区三区| 免费污视频在线观看| 亚洲免费在线播放| 免费国产作爱视频网站| 色婷婷六月亚洲综合香蕉| 久久久久亚洲精品无码网址 | 啦啦啦完整版免费视频在线观看| 亚洲免费一级视频| 亚洲?V乱码久久精品蜜桃| 久久免费精品一区二区| 亚洲国产视频久久| 亚洲日韩国产一区二区三区| 午夜免费啪视频在线观看| 亚洲人成色99999在线观看| 久久亚洲精品无码播放| 久久精品免费一区二区| 朝桐光亚洲专区在线中文字幕| 亚洲精品国产成人片| 嫩草视频在线免费观看| 久久久久久av无码免费看大片| 亚洲电影在线免费观看|