Can't deploy Vue app in production

0
votes

I'm trying to deploy a Vue app in production. After executing the command "npm run build" I copied "index.html" and "dist" into my apache root directory. When I access to my website, the next mistake appears:

external "vue-axios":1 Uncaught ReferenceError: vue is not defined

Do you know if I have to do an additional step before deploying my app?

PX: This app works properly by using "npm run dev"

1
npmvue.jsvue-cli
Can you show your package.json? Are you sure you have vue in dependencies, not devDependencies? – ittus
"dependencies": { "vue": "^2.5.11", "vue-router": "^3.0.1" }, "devDependencies": { "babel-core": "^6.26.0", "babel-loader": "^7.1.2", "babel-preset-env": "^1.6.0", "babel-preset-stage-3": "^6.24.1", "cross-env": "^5.0.5", "css-loader": "^0.28.7", "file-loader": "^1.1.4", "node-sass": "^4.5.3", "sass-loader": "^6.0.6", "vue-loader": "^13.0.5", "vue-template-compiler": "^2.4.4", "webpack": "^3.6.0", "webpack-dev-server": "^2.9.1" }, – Stiben
It is part of my package.json, thank for your help – Stiben
Is vue-axios in dependencies ? – ittus
please provide the index.html – Barris

1 Answers

0
votes

So it looks like the reason you are getting Uncaught ReferenceError: vue is not defined is likely due to the fact that you are requiring your source code bundle before you are requiring Vue.js. (Assuming you don't have vue bundled into your source)

So when the browser hits <script src="/dist/build.js"></script>, any code that relies on vue is going to fail.

<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <title>soporte_7x24</title> <link rel="stylesheet" href="maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/…; crossorigin="anonymous"> </head> <body> <div id="app"></div> <script src="/dist/build.js"></script> <script src="cdnjs.cloudflare.com/ajax/libs/vue/1.0.18/…;"/> </body> </html>

Change the order of <script src="/dist/build.js"></script> so that it is after <script src="cdnjs.cloudflare.com/ajax/libs/vue/1.0.18/…;"/>