没有 NodeJS 的 vue 文件？

vue files without NodeJS?

提问by Dmitry Bubnenkov

I want to host my app outside of node JS, but I want to use .vue files and possible npm as build system (if it's needed). Is it's possible to do?

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

I do not need any backward compatibility and if it work on latest Chrome dev it's ok for me.

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

Is there any examples how it can be done?

有什么例子可以做到吗？

I tried to build some webpack template, but it's work only inside NodeJS. On other server I am getting 404 when I am accessing to URLs that placed in .vuefiles. It's seems that they can't be handled by the other server.

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

回答by Marek Urbanowicz

1. VueJS app is not NodeJS app.
2. VueJS app is interpreted by the browser.
3. You just have to build your app on computer and host files as any static website, so any server can serve html and files.
4. To build your app use e.g. Webpack (https://github.com/vuejs-templates/webpack)

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

回答by Simon.Lay

NodeJs only use to build *.js files in front-end, your WebApp dosen't have to run on Nodejs.

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

1, You can create a index.html file that requires *.js file when webpack built it.

1、你可以在webpack构建时创建一个需要*.js文件的index.html文件。

2, Use Chrome to open your index.html file so you can see it works.

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

You don't need to use vue-cli or other servers if you only want a static page.

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

But you have to know how to set your webpack.config.js, you can look that doc https://webpack.js.org/guides/getting-started/

但是你必须知道如何设置你的 webpack.config.js，你可以看看那个文档https://webpack.js.org/guides/getting-started/

回答by AlloyTeamZy

Your starting point is wrong. Vue + node.js can build a complete site. Vue is the front-end framework, node's server language. The two can be used in combination. But not vue must rely on node to use. The two of them can be perfect to achieve the front and back separation of the development model.

你的出发点是错误的。Vue + node.js 可以搭建一个完整的站点。Vue 是前端框架，node 的服务器语言。两者可以结合使用。但不是vue 必须依赖node 才能使用。两者可以完美的实现开发模式的前后分离。

In projects that use vue, individuals do not recommend configuring webpack and vue-loader separately. You can directly use vue official scaffolding, vue-cli. Do not have to consider these configurations, automatically configured.

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

Vue-cli

Vue-cli

If you just started learning Vue, here's an entry-level demo. Although it is only a small application, but it covers a lot of knowledge points (vue2.0 + vue-cli + vue-router + vuex + axios + mysql + express + pm2 + webpack), including front-end, back-end, database and other sites Some of the necessary elements, for me, learning great significance, would like to encourage each other!

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

Vue Demo

Vue 演示

回答by Sabre

Best way to develop Vue app is run dev server, and after all just build static assets. You don't need use vuex files, even better is use static template because you can easily integrate it with some back-end (WordPress or whatever). Helpfully will be use some starter, for ex. Vue.js starter

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

回答by Alex Defreitas

It's true that vue will create static html pages when you run the build script. However,you will need to serve the files from a small server for the site to work. If you notice, when you run npm run build, the terminal will print a notice...

确实，当您运行构建脚本时，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.

You can create a simple http server in your /distdirectory with express and then host your site somewhere like Heroku.

您可以/dist使用 express在您的目录中创建一个简单的 http 服务器，然后将您的站点托管在 Heroku 之类的地方。

Take a look at this article https://medium.com/@sagarjauhari/quick-n-clean-way-to-deploy-vue-webpack-apps-on-heroku-b522d3904bc8#.4nbg2ssy0

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

TLDR;

TLDR；

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

2. add a postinstallscript 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"
     }
   }
   

3. push only your /distfolder to heroku after you've compiled your site.

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. postinstall在 package.json 内添加一个脚本/dist

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

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

proof: I've followed these steps to host my vue.js project

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

回答by AdamPat

Could you try something as simple as an S3 bucket setup for web serving? How big is your project? How much traffic do you think you'll get? If it's very small, you may be able to host on S3 and use webpack, etc.

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