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?
1
-
1Possible duplicate of How to deploy Vue app?Bert– Bert2017-08-17 16:28:01 +00:00Commented Aug 17, 2017 at 16:28
Add a comment
|
2 Answers
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.
6 Comments
AJ Goudel
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.
Eric Guan
The build process tells you those files are meant to be served by an http server.
AJ Goudel
The page was blank because the path to the files were off by one backslash.
lmiller1990
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!
Jordan
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. github.com/vuejs-templates/webpack/blob/develop/docs/backend.md Any thoughts on getting a single build.js file with the default webpack setup?
|
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
