Vue files without NodeJS?

I want to host my application outside of node JS, but I want to use .vue files and possible npm as a build system (if necessary). Can this be done?

I don't need backward compatibility, and if it works with the latest Chrome dev, this is fine for me.

Are there any examples of how this can be done?

I tried to create a webpack template, but it only works inside NodeJS. On another server, I get 404 when I access the URLs that fit in the .vue files. It seems that they cannot be processed by another server.

+14
source share
7 answers
  1. VueJS is not a NodeJS application.
  2. VueJS application is interpreted by the browser.
  3. You just need to create the application on the computer and place the files, as on any static website, so that any server can serve HTML and files.
  4. To create your application, use, for example, the Web Package ( https://github.com/vuejs-templates/webpack )
+16
source share

NodeJs are used only to create * .js files in the front-end, your WebApp should not work on Nodejs.

1. You can create an index.html file that requires a * .js file when creating it in a web package.

2. Use Chrome to open the index.html file to see how it works.

You do not need to use vue-cli or other servers if you only need a static page.

But you need to know how to install your webpack.config.js, you can see this document https://webpack.js.org/guides/getting-started/

+5
source share

Your starting point is incorrect. Vue + node.js can build a complete site. Vue is a front-end environment, node server language. These two options can be used in combination. But not vue should rely on node to use. Two of them may be ideal for achieving front and back trim development models.

In projects that use vue, people do not recommend setting up webpack and vue-loader separately. You can directly use the official vue, vue-cli scaffolding. You do not need to consider these configurations that are automatically configured.

Vue-cli

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

Vue demo

+2
source share

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

 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 /dist directory using express, and then host your site somewhere like Heroku.

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

TL; DR;

  • 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 postinstall script to package.json inside /dist

     { "name": "myApp", "version": "1.0.0", "description": "awesome stuff", "author": "me oh my", "private": true, "scripts": { "postinstall": "npm install express" } } 
  • only click your /dist folder on the hero after you compiled your site.

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

+1
source share

The best way to develop a Vue application is to run a dev server, and simply create static assets. You do not need to use vuex files, it is even better to use a static template, because you can easily integrate it with some internal ones (WordPress or something else). It will be useful to use some kind of starter, for example. Vue.js starter

+1
source share

They are trying to say that as soon as you create your site using the webpack command, it will output normal javascript to the directory in which your webpack configurator is installed. There will be no .vue files at this point, and your html file will only need links for the vue and vue-router libraries. In addition to this, you will need to publish code for people to help you.

0
source share

Could you try something simple, like installing an S3 bucket for web services? How big is your project? How much traffic do you think you get? If it is very small, you can host it on S3 and use webpack, etc.

0
source share

All Articles