CODEWITHSUNDEEP
node.jsvue.jsvuejs2web-deployment
AJ Goudel
AJ Goudel

Reputation: 349

How to deploy a Vue app after using vue cli webpack

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?

Upvotes: 2

Views: 5466

Answers (2)

Eelco
Eelco

Reputation: 111

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

Upvotes: 0

lmiller1990
lmiller1990

Reputation: 945

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.

Upvotes: 3

Related Questions