Настоящая упаковка в один клик, автоматическая сборка и развертывание

Vue.js

1 статья Происхождение

Некоторое время назад небольшой партнер Nuggets поделился своим методом автоматического построения интерфейса.👉Интерфейсный инструмент автоматического развертывания одним щелчком мыши,так же поделюсь своим методом.По сравнению с его,использование и технология аналогичны,а его красивее.Хахаха,у моего нет никаких преимуществ.У партнеров вариантов больше. Эта статья в основном предыдущая статья👉Поделитесь, какие приготовления я сделал после создания проекта с VueCliрасширение

2 Затем начинаем

2.1 Сделайте что-нибудь первым

Прежде всего, теперь мы устанавливаем следующие плагины в корневой каталог проекта (vue/react):

  • 👉gulpОсновываясь на мощных потоковых возможностях узла, gulp не сразу записывает файлы на диск во время процесса сборки, тем самым повышая скорость сборки.
  • 👉gulp-sftp-up5 Я лично добавил атрибут удаленного удаления папки на основе gulp-sftp-up4Расширены пользовательские команды, удаленное удаление и настройка локального .env (версия 0.0.8 и выше).
  • 👉cross-envЗапуск сценариев, которые устанавливают и используют переменные среды на разных платформах.
yarn add gulp gulp-sftp-up5 cross-env -D
// or
npm i gulp gulp-sftp-up5 cross-env -D

2.2 Начните настройку связанных файлов

  • Добавьте файл deploy.js в корневой каталог проекта,Я не буду здесь заниматься переменными окружения Node., друзья могут установить его сами, но все же необходимо создать файл конфигурации, чтобы предотвратить утечку информации

Способ 1 (небезопасный) 

// deploy.js

/**
 * 部署之前请检查好要部署的路径
 * 如有多个环境，自行拓展
 */
const gulp = require("gulp")
const sftp = require("gulp-sftp-up5")
const CONFIG = require("./vue.config") // 只是为了保证上传的文件夹一致

const sftpConfig = {
  // 此处的key对应着package.json中脚本的 APP_ENV
  test: {
    remotePath: "/service/web", // 部署到服务器的路径
    host: "192.168.0.99", // 服务器地址
    user: "root", // 帐号
    pass: "1433223", // 密码
    port: 22, // 端口
    removeCurrentFolderFiles: true, // 该属性可删除 remotePath 下的所有文件/文件夹
  },
  prod: {
    remotePath: "/service/web", // 部署到服务器的路径
    host: "127.0.0.1", // 服务器地址
    user: "root", // 帐号
    pass: "1433223", // 密码
    port: 22, // 端口
    removeCurrentFolderFiles: true,
  },
}

// 采用管道流的方式将 outputDir 中的文件上传到远端
gulp.src("./" + CONFIG.outputDir + "/**").pipe(sftp(sftpConfig[process.env.APP_ENV]))

Способ 2 (необходимо настроить свойства SFTP)

  • Для дополнительной безопасности сохраните информацию о конфигурации в файле с именем.env.sftpjson (или любое другое значение, заданное для options.authFile ).Убедитесь, что добавить этот файл в .gitignore.
  • Теперь переместите хост-порт пользователя в файл конфигурации .env.sftp, использование метода 1 зарезервировано, пожалуйста, выберите подходящее
// .env.sftp  请严格按照JSON格式
{
  "test": {
    "user": "root",
    "pass": "123456",
    "host": "192.168.0.1",
    "port": 22
  },
  "prod": {
    "user": "root",
    "pass": "123456",
    "host": "192.168.0.",
    "port": 22
  }
}

// deploy.js

/**
 * 部署之前请检查好要部署的路径
 * 如有多个环境，自行拓展
 */
const gulp = require("gulp")
const sftp = require("gulp-sftp-up5")
const CONFIG = require("./vue.config") // 只是为了保证上传的文件夹一致

const sftpConfig = {
  // 此处的key对应着package.json中脚本的 APP_ENV
  test: {
    remotePath: "/service/web", // 部署到服务器的路径
    SFTP: 'test', // 对应着.env.sftp的可以
    removeCurrentFolderFiles: true, // 该属性可删除 remotePath 下的所有文件/文件夹
  },
  prod: {
    remotePath: "/service/web", // 部署到服务器的路径
    SFTP: 'prod',
    removeCurrentFolderFiles: true,
  },
}

// 采用管道流的方式将 outputDir 中的文件上传到远端
gulp.src("./" + CONFIG.outputDir + "/**").pipe(sftp(sftpConfig[process.env.APP_ENV]))
  • Установите наш файл package.json, где значение APP_ENV должно соответствовать ключу sftpConfig в deploy.js, чтобы различать, в какой среде развернута сборка.
 "scripts": {
    "dev": "vue-cli-service serve --mode dev",
    "build:test": "vue-cli-service build --mode build_test && cross-env APP_ENV=test npm run deploy",
    "build:prod": "vue-cli-service build --mode build_prod && cross-env APP_ENV=prod npm run deploy",
    "deploy": "node ./deploy.js"
  }

После своего наблюдения я обнаружил, что многим небольшим партнерам нравится вводить команды каждый раз, когда они запускают проект или упаковывают проект.На самом деле это не должно быть так хлопотно, просто нажмите, чтобы выполнить его.Если вы внимательно посмотрите на слева от VScode автоматически появится исполняемый файл scripts script, при нажатии на маленький треугольник в dev он выполнит npm run dev, если нажать build:test, то запустится npm run build:test, что очень удобно , экономит время и усилия, и не легко сделать ошибки

2.3 Примечания

Мы можем публиковать только по порядку каждый раз, когда мы публикуем.Например, в период, когда вы публикуете тестовую среду, лучше не публиковать код официальной среды одновременно, потому что он будет охватывать папку dist, содержащую VUE_APP, который вы устанавливаете, переменные среды и т. д., рекомендуется, чтобы друзья не забывали приходить по порядку, а APP_ENV в скрипте должен соответствовать файлу deploy.js.

3 закончен

Эта статья очень проста и позволяет друзьям иметь больше выбора, открывать глаза и исправлять ошибки предыдущей статьи.Плагин сжатия-webpack-plugin бесполезен, если GZIP включен, Nginx является основной силой.

Наконец, спасибо за вашу дегустацию. Ниже размещен код шаблона, который я подготовил, который содержит некоторый справочный код и немного настроенного vue.config.js, а также сегодняшний выпуск автоматической сборки. Для проекта это хорошо выбор.

Будь лучшим тайм-менеджером, то есть хозяином времени. --Я сказал

В этой статье используется👉mdniceнабор текста

Категории