M\u00f6chte man bspw. ein VueJS\/JS Projekt auf einem Webserver ver\u00f6ffentlichen, hat man in der Regel ein NPM-Script um die Distribution zu erzeugen, in meinem Fall npm run build. In meinem VueJS-Projekt steht in der package.json:<\/p>\r\n\r\n\r\n
„build“: „vue-cli-service build“,<\/p>\r\n\r\n\r\n\r\n
Nach dem Build-Prozess m\u00f6chte ich nun die erzeugte Distribution, die im Verzeichnis ‚\/dist\/‘ erstellt wurde via SFTP auf einen Webserver hochladen. <\/p>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n
Die Vue CLI Service benutzt intern Webpack. M\u00f6chte man die Webpack-Konfiguration erweitern kann man dazu, falls nicht schon vorhanden, im Root-Verzeichnis eine Datei vue.config.js erstellen mit folgendem Code:<\/p>\r\n\r\n
\r\nmodule.exports = {\r\n configureWebpack: {\r\n plugins: \r\n [\r\n \r\n ] \r\n }\r\n};<\/pre>\r\n\r\nJetzt installiere ich das Webpack Plugin https:\/\/github.com\/ferpinan\/webpack-sftp-upload-plugin mit:<\/p>\r\n\r\n
npm i -D webpack-ftp-upload-plugin<\/pre>\r\n\r\nAnschlie\u00dfend erg\u00e4nze ich den Code im Plugins-Block der vue.config.js um folgende Zeilen:<\/p>\r\n
new WebpackFtpUpload({\r\n host: 'host (z.B. example.com)',\r\n port: '22', \/\/ default: 22\r\n username: 'MyUser',\r\n password: 'MyPassword',\r\n local: '\/var\/www\/html\/my-project\/dist',\r\n path: '\/var\/www\/html\/my-project\/dist',\r\n}) <\/pre>\r\n\r\n\r\nNach dem der Build-Prozess mit npm run build abgeschlossen ist, wird das Verzeichnis ‚\/var\/www\/html\/my-project\/dist‘ auf dem Remote Server erzeugt und die Dateien kopiert. Deployment abgeschlossen.<\/p>\r\n\r\n
Erg\u00e4nzung:<\/strong> Das Plugin wird so auch bei npm start verwendet und die Dateien werden via SFTP kopiert. In der Regel m\u00f6chte man das Plugin aber nur bei build nutzen. Dazu \u00e4ndert man die vue.config.js, wie folgt:<\/p>\r\n\r\nprocess.env.NODE_ENV==='production' ? new WebpackFtpUpload({\r\n host: 'host (z.B. example.com)',\r\n port: '22', \/\/ default: 22\r\n username: 'MyUser',\r\n password: 'MyPassword',\r\n local: '\/var\/www\/html\/my-project\/dist',\r\n path: '\/var\/www\/html\/my-project\/dist',\r\n }): true<\/pre>\r\n\r\nJetzt werden die Dateien nur bei npm start build kopiert.<\/p>","protected":false},"excerpt":{"rendered":"
M\u00f6chte man bspw. ein VueJS\/JS Projekt auf einem Webserver ver\u00f6ffentlichen, hat man in der Regel ein NPM-Script um die Distribution zu erzeugen, in meinem Fall npm run build….<\/p>\n","protected":false},"author":4,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[34],"tags":[],"class_list":["post-1421","post","type-post","status-publish","format-standard","hentry","category-contao"],"_links":{"self":[{"href":"https:\/\/www.weschkalnies.de\/blog\/wp-json\/wp\/v2\/posts\/1421","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.weschkalnies.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.weschkalnies.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.weschkalnies.de\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.weschkalnies.de\/blog\/wp-json\/wp\/v2\/comments?post=1421"}],"version-history":[{"count":18,"href":"https:\/\/www.weschkalnies.de\/blog\/wp-json\/wp\/v2\/posts\/1421\/revisions"}],"predecessor-version":[{"id":1733,"href":"https:\/\/www.weschkalnies.de\/blog\/wp-json\/wp\/v2\/posts\/1421\/revisions\/1733"}],"wp:attachment":[{"href":"https:\/\/www.weschkalnies.de\/blog\/wp-json\/wp\/v2\/media?parent=1421"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.weschkalnies.de\/blog\/wp-json\/wp\/v2\/categories?post=1421"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.weschkalnies.de\/blog\/wp-json\/wp\/v2\/tags?post=1421"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}