没有 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 组件。

_{免责声明：作者在这里}