Question posted in
Some documentation to get you started can be found here.

Laravel Vuejs deploy application in hosted server – Apache

Please, I try to host my Laravel-Vuejs application in my hosted server, but it doesn’t work.

I get this msg in my web inspector

DevTools failed to parse SourceMap: http://sample.com/myproject/js/bootstrap.js.map
app.js:107387 app vue
app.js:18929 You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.
See more tips at https://vuejs.org/guide/deployment.html

And I get always blank page (components not loaded), how can I fix this, please. thanks

Package.json

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "devDependencies": {
        "axios": "^0.18",
        "bootstrap": "^4.1.3",
        "cross-env": "^5.2.0",
        "jquery": "^3.2",
        "laravel-mix": "^2.0",
        "lodash": "^4.17.4",
        "popper.js": "^1.14.4",
        "vue": "^2.5.17"
    },
    "dependencies": {
        "bootstrap-vue": "^2.0.0-rc.11",
        "cross-spawn": "^6.0.5",
        "css-loader": "^0.28.11",
        "moment": "^2.22.2",
        "style-loader": "^0.21.0",
        "vee-validate": "^2.0.9",
        "vue-moment": "^4.0.0",
        "vue-progressbar": "^0.7.5",
        "vue-router": "^3.0.1",
        "vue-scrollspy": "^0.1.3",
        "vue-spinner": "^1.0.3",
        "vue-template-compiler": "^2.5.17",
        "vue2-scrollspy": "^2.3.1",
        "vuejs-datepicker": "^1.5.2",
        "vuex": "^3.0.1",
        "webpack-dev-server": "^3.1.5"
    }
}

webpack.mix.js

let mix = require('laravel-mix');

mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css');
Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    I fix the problem, and I share with you the solution:

    So this kind of problem depends on the base URL of your app router, for my situation base: __dirname is the problem, so I changed this to base: '/project_name/public/, and everything works fine.

    Thank you all for you help.


  2. 0

    Laravel has become the most popular choice for developing PHP projects. One important reason for this popularity is the built in support for Vue.js, a very fast growing JavaScript library for developing impressive front-ends.

    This combination results is fast, secure and very impressive applications that need minimum time to go from ideation to final code review. The support for Vue.js means that Laravel developers could use Vue components easily within their apps without wasting time in writing integrations for the components.

    Host you Laravel Vuejs spa

    Login or Signup to reply.
  3. 0

    you need to turn Vue to production mode,

    you can do so by adding this line to your app.js

    Vue.config.devtools = false
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search