Question

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

我不需要任何向后兼容性，如果它适用于最新的Chrome开发者，那对我来说还不错。

有没有可以做到的例子？

我尝试构建一些webpack模板，但它只在NodeJS中工作。在其他服务器上，当我访问放置在namespace BSE.UI.Xaml.Controls.Extensions { public static class ContentDialog { public static readonly DependencyProperty DialogCancelProperty = DependencyProperty.RegisterAttached("DialogCancel", typeof(bool), typeof(ContentDialog), new PropertyMetadata(false)); public static readonly DependencyProperty CancelableCommandParameterProperty = DependencyProperty.Register("CancelableCommandParameter", typeof(object), typeof(ContentDialog), null); public static readonly DependencyProperty CancelableCommandProperty = DependencyProperty.RegisterAttached("CancelableCommand", typeof(ICommand), typeof(ContentDialog), new PropertyMetadata(null, OnCancelableCommandChanged)); public static void SetDialogCancel(DependencyObject obj, bool value) { obj.SetValue(DialogCancelProperty, value); } public static bool GetDialogCancel(DependencyObject obj) { return (bool)obj.GetValue(DialogCancelProperty); } public static ICommand GetCancelableCommand(DependencyObject obj) { return (ICommand)obj.GetValue(CancelableCommandProperty); } public static void SetCancelableCommand(DependencyObject obj, ICommand value) { obj.SetValue(CancelableCommandProperty, value); } public static object GetCancelableCommandParameter(DependencyObject obj) { return obj.GetValue(CancelableCommandParameterProperty); } public static void SetCancelableCommandParameter(DependencyObject obj, object value) { obj.SetValue(CancelableCommandParameterProperty, value); } private static void OnCancelableCommandChanged(DependencyObject obj, DependencyPropertyChangedEventArgs e) { var contentDialog = obj as Windows.UI.Xaml.Controls.ContentDialog; if (contentDialog != null) { contentDialog.Loaded += (sender, routedEventArgs) => { ((Windows.UI.Xaml.Controls.ContentDialog)sender).PrimaryButtonClick += OnPrimaryButtonClick; }; } } private static void OnPrimaryButtonClick(Windows.UI.Xaml.Controls.ContentDialog sender, ContentDialogButtonClickEventArgs args) { var contentDialog = sender as Windows.UI.Xaml.Controls.ContentDialog; if (contentDialog != null) { var command = GetCancelableCommand(contentDialog); command?.Execute(GetCancelableCommandParameter(contentDialog)); args.Cancel = GetDialogCancel(contentDialog); } } } }文件中的URL时，我得到404。似乎他们无法由其他服务器处理。

Answer 1

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

Answer 2

NodeJs仅用于在前端构建* .js文件，您的WebApp不必在Nodej上运行。

1，您可以在webpack构建时创建需要* .js文件的index.html文件。

2，使用Chrome打开您认为可以正常工作的index.html文件。

如果您只想要一个静态页面，则无需使用vue-cli或其他服务器。

但你必须知道如何设置你的webpack.config.js，你可以看一下doc https://webpack.js.org/guides/getting-started/

Answer 3

你的出发点是错误的。 Vue + node.js可以构建一个完整的站点。 Vue是前端框架，节点的服务器语言。这两者可以组合使用。但不是vue必须依赖节点来使用。它们中的两个可以完美地实现开发模型的前后分离。

在使用vue的项目中，个人不建议单独配置webpack和vue-loader。你可以直接使用vue官方脚手架，vue-cli。不必考虑这些配置，自动配置。

Vue-cli

如果您刚开始学习Vue，这是一个入门级演示。虽然它只是一个小应用程序，但它涵盖了很多知识点（vue2.0 + vue-cli + vue-router + vuex + axios + mysql + express + pm2 + webpack），包括前端，后端，数据库和其他网站对于我来说，学习重要意义的一些必要元素，希望互相鼓励！

Vue Demo

Answer 4

运行构建脚本时，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);

在postinstall

中的package.json中添加/dist脚本

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

在您编制网站后，只将您的/dist文件夹推送到heroku。

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

Answer 5

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

Answer 6

您可以尝试像网络服务的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 组件。

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

没有NodeJS的vue文件？

7 个答案: