php laravel/vuejs deployment my vuejs views are not rendering

Question

I have a project using laravel 5.5 and vuejs 2.5.7. Everything is working fine on localhost but on production,my vuejs components are not rendering. All my request are fine, i have only 200. I have done npm run production and set the app.js files into my folder public_html/js

I have two folders:

public -js/app.js //after npm run production -index.php -css -images -etc...
alpha all the other files -vendor -node-modules -ressources -etc...

my home page:

<!DOCTYPE html>

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">

<title>{{ config('app.name', 'AlphaTeen') }}</title>

<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<link href="{{ asset('css/main.css') }}" rel="stylesheet">
<link href="{{asset('css/bootstrap-social.css')}}" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font- 
awesome.min.css" rel="font-awesome">

</head>
<body>

    @yield('content')
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}"></script>//after having done npm run 
production
</body>
</html>

my php file:

@extends('layouts.vue_app')

@section('content')

<div id="products"></div>
<script>
        window.Laravel=<?php echo json_encode([
            'csrfToken'=> csrf_token(),
        ]); ?>
        </script>
@endsection

my App.vue:

<template>

  <div>
      <transition name="fade">
          <router-view></router-view>
      </transition>
  </div>

</template>

my app.js files who's rendering the route:

import Vue from 'vue';
import Vuelidate from 'vuelidate';
import VueRouter from 'vue-router';
import VueAxios from 'vue-axios';
import axios from 'axios';
import Paginate from 'vuejs-paginate';

Vue.use(VueRouter);
Vue.use(Vuelidate);
Vue.use(VueAxios,axios);
Vue.component('paginate',Paginate)

import App from './App.vue';
import Products from './components/Products.vue';
import Categories from './components/Categories.vue'; 
import Social from './components/Social.vue';
import Explain from './components/Explain.vue';
import Login from './components/Login.vue';
import Mail from './components/Mail.vue';
import Home from './components/Home.vue';
import testCloud from './components/admin/cloudVue.vue';
import Cloud from './components/admin/cloud.vue';
import Comments from './components/admin/comments.vue';

window.onload=function(){
const router=new VueRouter({mode:'history',routes:routes});
new Vue(Vue.util.extend({router},App)).$mount('#products');};

I'm using webpack.mix.js:

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

i have done all the transfers with ftp, i know that is not the best solution but i have to. This is my first question on stackOverFlow so i hope having be enough clear. Thanks

Isn't vue.js throwing any errors in the console? – JoeriShoeby May 23 '18 at 12:06 — JoeriShoeby, May 23 '18 at 12:06
and vue devtools tell me that vuejs is detected on the page – Nathan Chemla May 23 '18 at 12:33 — Nathan Chemla, May 23 '18 at 12:33

score 2 · Answer 1 · answered May 23 '18 at 15:09

Your assets (js,css) may be cached, try to open your page in different browser or open Chrome devtools and check "Disable cache" (while chrome devtools is open option) and then reload page.

Right click -> Inspect -> Network tab -> Disable cache

Then reload page using cmd + r or refresh button

php laravel/vuejs deployment my vuejs views are not rendering

1 Answers1