没有NodeJS的vue文件？

Posted 2023-02-22

【中文标题】没有NodeJS的vue文件？

【英文标题】：vue files without NodeJS?

【发布时间】：2017-07-18 00:03:30

【问题描述】：

我想在节点 JS 之外托管我的应用程序，但我想使用 .vue 文件和可能的 npm 作为构建系统（如果需要）。有可能吗？

我不需要任何向后兼容性，如果它适用于最新的 Chrome 开发人员，那对我来说没问题。

有什么例子可以做到吗？

我尝试构建一些 webpack 模板，但它只能在 NodeJS 内部工作。在其他服务器上，当我访问放置在 .vue 文件中的 URL 时，我得到 404。似乎其他服务器无法处理它们。

【问题讨论】：

如果可以使用npm构建系统，那么使用webpack和vue loader有什么问题？

Webpack/Browserify 只是在你编译你的 .vue 文件时输出标准的 javascript，没有什么服务器特定的。

他们试图告诉你，一旦你使用 webpack 命令构建你的网站，它就会将普通的 javascript 输出到你的 webpack 配置设置的目录。此时将没有 .vue 文件，您的 html 文件只需要 vue 和 vue-router 库的链接。除此之外，您还需要发布一些代码以便人们能够帮助您。

【参考方案1】：

VueJS 应用不是 NodeJS 应用。 VueJS 应用程序由浏览器解释。 您只需在计算机上构建您的应用程序并像任何静态网站一样托管文件，因此任何服务器都可以提供 html 和文件。 要构建您的应用程序，请使用例如Webpack (https://github.com/vuejs-templates/webpack)

【讨论】：

@M U 我接下来应该做什么？我已经使用了一些 Webpack 模板，但是如果没有 NodeJS，我就无法在上面进行路由工作。 URL 只是在另一台服务器上显示 404。他们的页面是用.vue文件完​​成的，所以看起来他们没有被其他服务器处理。

您可以轻松构建 npm run build 静态网站并在您的服务器中指向 www

【参考方案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/

【参考方案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 Demo

【参考方案4】：

开发 Vue 应用程序的最佳方式是运行开发服务器，毕竟只是构建静态资产。您不需要使用 vuex 文件，更好的是使用静态模板，因为您可以轻松地将它与一些后端（WordPress 或其他）集成。 有帮助的是使用一些启动器，例如。 Vue.js starter

【参考方案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;

写一个超级简单的快递服务器

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);

在 /dist 内的 package.json 中添加 postinstall 脚本

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

编译站点后，仅将 /dist 文件夹推送到 heroku。

证明：我已经按照这些步骤来托管我的 vue.js 项目

【参考方案6】：

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

vue3-sfc-loader Vue3/Vue2 单文件组件加载器。在运行时从您的 html/js 动态加载 .vue 文件。没有 node.js 环境，不需要（webpack）构建步骤。

vue3-sfc-loader 将在运行时解析您的 .vue 文件并创建一个随时可用的 Vue 组件。

_{免责声明：作者在此}

【参考方案7】：

您能否尝试一些简单的方法，例如为 Web 服务设置 S3 存储桶？你的项目有多大？你认为你会得到多少流量？如果它很小，你也许可以在 S3 上托管并使用 webpack 等。