php laravel/vuejs 部署我的 vuejs 视图没有呈现答案

【问题标题】：php laravel/vuejs deployment my vuejs views are not renderingphp laravel/vuejs 部署我的 vuejs 视图没有呈现
【发布时间】：2018-11-02 09:08:50
【问题描述】：

我有一个使用 laravel 5.5 和 vuejs 2.5.7 的项目。在 localhost 上一切正常，但在生产中，我的 vuejs 组件没有渲染。我的所有要求都很好，我只有 200 个。我已经完成了 npm run production 并将 app.js 文件设置到我的文件夹 public_html/js

我有两个文件夹：

public -js/app.js //npm 运行生产后 -index.php -css -图片 -等等...
alpha 所有其他文件 -小贩 -节点模块 -资源 -等等...

我的主页：

<!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>

我的 php 文件：

@extends('layouts.vue_app')

@section('content')

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

我的 App.vue：

<template>

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

</template>

渲染路线的我的 app.js 文件：

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');};

我正在使用 webpack.mix.js：

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

我已经使用 ftp 完成了所有传输，我知道这不是最好的解决方案，但我必须这样做。这是我关于 stackOverFlow 的第一个问题，所以我希望足够清楚。谢谢

【问题讨论】：

vue.js 不是在控制台抛出任何错误吗？
没有没有错误
和 vue devtools 告诉我在页面上检测到 vuejs

标签： php laravel vue.js ftp node-modules

【解决方案1】：

您的资产（js、css）可能被缓存，请尝试在不同的浏览器中打开您的页面或打开 Chrome devtools 并选中“禁用缓存”（当 chrome devtools 处于打开选项时），然后重新加载页面。

右键->检查->网络选项卡->禁用缓存

然后使用cmd + r 或刷新按钮重新加载页面

【讨论】：