不使用NodeJS如何处理Vue文件？

Question

不使用NodeJS如何处理Vue文件？

node.jsvue.js

23

我想将我的应用程序托管在NodeJS之外，但我想使用.vue文件和可能的npm作为构建系统（如果需要）。这是否可行？

我不需要任何向后兼容性，如果它能够在最新版本的Chrome dev上运行，那对我来说就可以了。

有没有任何示例可以说明如何完成这个过程？

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

- Dmitry Bubnenkov

如果你能使用npm构建系统，那么使用vue loader和webpack有什么问题呢？ - dfsq

Webpack/Browserify在编译.vue文件时只会输出标准的JavaScript代码，没有任何与服务器相关的内容。 - Joe Clay

他们试图表达的是，一旦你使用webpack命令构建网站，它将输出普通的JavaScript到你的webpack配置所设置的目录中。此时不会有.vue文件，你的HTML文件只需要链接vue和vue-router库。除此之外，你需要发布一些代码以便人们能够帮助你。 - JoelCool

7个回答

9

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/

- Simon.Lay

4

你的起点是错误的。Vue + node.js 可以构建完整的网站。Vue 是前端框架，node 是服务器语言。两者可以结合使用，但不必依赖 node 使用 Vue。它们可以完美地实现前后端分离的开发模式。

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

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

请参考以下链接：Vue-cli和Vue Demo。

- AlloyTeamZy

2

开发Vue应用的最佳方式是运行开发服务器，然后只需构建静态资源。你不需要使用vuex文件，更好的方法是使用静态模板，因为你可以轻松地将其与某些后端（WordPress或其他）集成。

最好使用一些入门工具，例如Vue.js starter

- Sabre

2

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

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

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

_{免责声明：作者本人}

- Franck Freiburger

1

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

write a super simple express server

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

add a postinstall script in a package.json within /dist

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

push only your /dist folder to heroku after you've compiled your site.

证明：我按照以下步骤托管了我的vue.js项目

- Alex Defreitas

0

你可以尝试使用S3存储桶来进行网页服务，这是一种简单的方式。你的项目有多大？你预计会有多少流量？如果很小，你可能可以在S3上托管并使用webpack等工具。

- AdamPat

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Marek Urbanowicz · Accepted Answer

VueJS 应用程序不是 NodeJS 应用程序。
VueJS 应用程序由浏览器解释执行。
你只需要在电脑上构建应用程序，并将其托管为任何静态网站，因此任何服务器都可以提供 html 和文件。
要构建应用程序，请使用 Webpack（https://github.com/vuejs-templates/webpack）。