沒有 NodeJS 的 vue 文件？

Question

我想在 node JS 之外托管我的應用程序，但我想使用 .vue 文件和可能的 npm 作為構建系統（如果需要）。 有可能嗎？

我不需要任何向后兼容性，如果它適用於最新的 Chrome 開發人員，那對我來說沒問題。

有什么例子可以做到嗎？

我試圖構建一些 webpack 模板，但它只能在 NodeJS 內部工作。 在其他服務器上，當我訪問放置在.vue文件中的 URL 時，我收到 404。 似乎其他服務器無法處理它們。

Answer 1

1. VueJS 應用程序不是 NodeJS 應用程序。
2. VueJS 應用程序由瀏覽器解釋。
3. 您只需要在計算機上構建您的應用程序並將文件作為任何靜態網站托管，因此任何服務器都可以提供 html 和文件。
4. 要構建您的應用程序，請使用例如 Webpack ( https://github.com/vuejs-templates/webpack )

Answer 2

NodeJs 僅用於在前端構建 *.js 文件，您的 WebApp 不必運行在 Nodejs 上。

1、你可以在webpack構建時創建一個需要*.js文件的index.html文件。

2, 使用 Chrome 打開您的 index.html 文件，以便您可以看到它的工作原理。

如果你只想要一個靜態頁面，你不需要使用 vue-cli 或其他服務器。

但是你必須知道如何設置你的 webpack.config.js，你可以看看那個文檔https://webpack.js.org/guides/getting-started/

Answer 3

你的出發點是錯誤的。 Vue + node.js 可以搭建一個完整的站點。 Vue 是前端框架，node 的服務器語言。 兩者可以結合使用。 但不是vue 必須依賴node 才能使用。 兩者可以完美的實現開發模式的前后分離。

在使用vue的項目中，個人不建議單獨配置webpack和vue-loader。 可以直接使用vue官方腳手架vue-cli。 不用考慮這些配置，自動配置。

Vue-cli

如果你剛開始學習 Vue，這里有一個入門級演示。 雖然只是一個小應用，但是涵蓋了很多知識點（vue2.0 + vue-cli + vue-router + vuex + axios + mysql + express + pm2 + webpack），包括前端、后端，數據庫等網站的一些必備要素，對我來說，學習意義重大，希望互相鼓勵！

Vue 演示

Answer 4

開發 Vue 應用程序的最佳方式是運行開發服務器，畢竟只是構建靜態資產。 您不需要使用 vuex 文件，更好的是使用靜態模板，因為您可以輕松地將其與某些后端（WordPress 或其他）集成。 有用的是將使用一些啟動器，例如。 Vue.js 入門

Answer 5

確實，當您運行構建腳本時，vue 會創建靜態 html 頁面。 但是，您需要從小型服務器提供文件才能使站點正常工作。 如果您注意到，當您運行npm run build ，終端將打印一條通知...

Tip:
Built files are meant to be served over an HTTP server.
Opening index.html over file:// won't work.

您可以使用 express 在您的/dist目錄中創建一個簡單的 http 服務器，然后將您的站點托管在 Heroku 之類的地方。

看看這篇文章https://medium.com/@sagarjauhari/quick-n-clean-way-to-deploy-vue-webpack-apps-on-heroku-b522d3904bc8#.4nbg2ssy0

TLDR；

1. 寫一個超級簡單的快遞服務器

   var express = require('express'); var path = require('path'); var serveStatic = require('serve-static'); app = express(); app.use(serveStatic(__dirname)); var port = process.env.PORT || 5000; app.listen(port); console.log('server started '+ port);

2. 在/dist內的 package.json 中添加postinstall腳本

   { "name": "myApp", "version": "1.0.0", "description": "awesome stuff", "author": "me oh my", "private": true, "scripts": { "postinstall": "npm install express" } }

3. 編譯站點后，僅將/dist文件夾推送到 heroku。

證明：我已經按照這些步驟來托管我的 vue.js 項目

Answer 6

您可以嘗試像為 Web 服務設置 S3 存儲桶這樣簡單的方法嗎？ 你的項目有多大？ 你認為你會得到多少流量？ 如果它很小，您可以在 S3 上托管並使用 webpack 等。

Answer 7

使用 vue3-sfc-loader 可以在沒有 NodeJS（或 webpack）的情況下使用 vue 文件。

vue3-sfc-loader
Vue3/Vue2 單文件組件加載器。 在運行時從 html/js 動態加載 .vue 文件。 沒有 node.js 環境，不需要（webpack）構建步驟。

vue3-sfc-loader 將在運行時解析您的 .vue 文件並創建一個隨時可用的 Vue 組件。

_{免責聲明：作者在這里}