2017-02-27 35 views
8

我想在节点JS之外托管我的应用程序,但我想使用.vue文件和可能的npm作为构建系统(如果需要的话)。有可能做到吗?vue文件没有NodeJS?

我不需要任何向后兼容性,如果它在最新的Chrome开发工作,它对我来说没问题。

是否有任何示例如何实现?

我试图构建一些webpack模板,但它只能在NodeJS内工作。在其他服务器上,当我访问位于.vue文件中的URL时,我得到404。似乎他们不能被其他服务器处理。

+0

如果你可以使用NPM构建系统,那么究竟是用的WebPack与VUE装载机问题? – dfsq

+0

当你编译你的.vue文件时,Webpack/Browserify只是吐出标准的JavaScript,没有关于它们的特定服务器。 –

回答

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

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

0

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

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. 

您可以在/dist目录中明确创建一个简单的HTTP服务器,然后某处托管站点像Heroku的。

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

TLDR;

  1. 写一个超级简单的Express服务器

    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

    { 
        "name": "myApp", 
        "version": "1.0.0", 
        "description": "awesome stuff", 
        "author": "me oh my", 
        "private": true, 
        "scripts": { 
        "postinstall": "npm install express" 
        } 
    } 
    
  3. 推只有你/dist文件夹中的package.json添加postinstall脚本的Heroku”已编译您的网站。

证明:我已经按照以下步骤托管我vue.js项目

1

最佳的方式来开发应用程序的Vue运行开发服务器,毕竟只是建立静态资产。你不需要使用vuex文件,甚至更好的是使用静态模板,因为你可以很容易地将它与一些后端(WordPress或其他)集成。 有用地将使用一些启动器,例如。Vue.js starter

0

你能尝试为S3存储设置为Web服务一样简单的东西吗?你的项目有多大?你认为你会得到多少流量?如果它是非常小的,你可以主办S3和使用的WebPack等

2

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

在使用VUE项目,个人不建议单独配置的WebPack和VUE装载机。你可以直接使用vue官方脚手架,vue-cli。不必考虑这些配置,自动配置。

Vue-cli

如果你刚开始学习的Vue,这里是一个入门级的演示。虽然这只是一个很小的应用程序,但它涵盖了很多知识点(vue2.0 + VUE-CLI + VUE路由器+ vuex + Axios公司+ MYSQL +快递+ PM2 +的WebPack),包括前端,后端,数据库等网站一些必要的元素,对我而言,学习意义重大,想互相鼓励!

Vue Demo

3

唯一的NodeJS用于构建* .js文件在前端的文件,你的web应用这么想的必须在运行的NodeJS。

1,当建造的WebPack它可以创建需要* .js文件一个index.html文件。

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

你并不需要使用VUE,CLI或其他服务器,如果你只想要一个静态页面。

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