2

I recently finished creating a Vue app that I wish to deploy on the internet. However, I can only open the project using node and running npm run dev. If I double click on the index.html file, I just see a blank page. How may I deploy my website so that the browser can render my Vue app?

AJ Goudel
  • 339
  • 5
  • 14
  • 1
    Possible duplicate of [How to deploy Vue app?](https://stackoverflow.com/questions/42936588/how-to-deploy-vue-app) – Bert Aug 17 '17 at 16:28

2 Answers2

3

If you used the vue-cli to generate the project, you should be able to run npm run build and get a minified, single .js file.

See here: http://vuejs-templates.github.io/webpack/commands.html

This will give you a dist folder with index.html and build.js. You should be able to open the html file and see your app.

lmiller1990
  • 925
  • 2
  • 12
  • 22
  • I ran npm run build and I got a dist folder. Inside the dist folder, I have an index.html file and a static folder. However, when I click on index.html, I still get a blank page and not my app. – AJ Goudel Aug 17 '17 at 15:05
  • 1
    The build process tells you those files are meant to be served by an http server. – Eric Guan Aug 17 '17 at 16:39
  • The page was blank because the path to the files were off by one backslash. – AJ Goudel Aug 17 '17 at 17:42
  • Did you get it to work in the end? If you still havent had any luck I can show you how to set up a simple express server and serve the files. Best of luck! – lmiller1990 Aug 18 '17 at 00:25
  • I don't get a single .js file as of vue-cli 2.9.1. With the default webpack and not webpack simple, I get separate css and js directories and files under the static subfolder. With webpack-simple I get a single build.js file. I need to use webpack to alter the name of my index file for the app and move it since I am working within another backend framework. https://github.com/vuejs-templates/webpack/blob/develop/docs/backend.md Any thoughts on getting a single build.js file with the default webpack setup? – Jordan Oct 02 '17 at 21:09
  • This isn't something I've done before. I'm not sure of the benefits of a single js file and separate ones for the css and the such... but the production template does it, there must be a benefit. You should be able to edit the `config/index.js` and have your vue app built in whatever location your backend uses, and simply load it in the same way, though? Might give this a try if I get a chance this week and get back to you. – lmiller1990 Oct 03 '17 at 01:54
0

Hoping it's usefull for someone, still:

Using @vue/cli 3, I had a simular result when copiing the dist to my localhost/test.
The build assumed all js and css file relative to the root while I was putting them relative to a subfolder 'test'. adding the publicPath : "" did the trick to get rid of the preceeding '/'

in vue.config.js I added : ( using proxy for dev with apache/php )

module.exports = {

    devServer: {
        proxy: 'http://localhost:80/proxy'
    },

    configureWebpack: config => {
        if (process.env.NODE_ENV === 'production') {
            output: {
                 publicPath : "" // only for prod
            }
        } else { // dev
            // org, no changes
        }       
    }  
}

See also
https://alligator.io/vuejs/using-new-vue-cli-3/
https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md#inspecting-the-projects-webpack-config

Eelco
  • 111
  • 1
  • 5