php laravel/vuejs部署我的vuejs视图未呈现
我有一个使用laravel 5.5和vuejs 2.5.7的项目。 在localhost上一切正常,但在生产环境中,我的vuejs组件无法渲染。 我所有的要求都很好,我只有200个。 我已经完成了npm运行生产,并将app.js文件设置到我的文件夹public_html/js中 我有两个文件夹:php laravel/vuejs部署我的vuejs视图未呈现,php,laravel,vue.js,ftp,node-modules,Php,Laravel,Vue.js,Ftp,Node Modules,我有一个使用laravel 5.5和vuejs 2.5.7的项目。 在localhost上一切正常,但在生产环境中,我的vuejs组件无法渲染。 我所有的要求都很好,我只有200个。 我已经完成了npm运行生产,并将app.js文件设置到我的文件夹public_html/js中 我有两个文件夹: public-js/app.js//npm运行生产后 -index.php -css -图像 -等等 所有其他文件 -卖主 -节点模块 -资源 -等等 我的主页: <!DOCTYPE html
- public-js/app.js//npm运行生产后 -index.php -css -图像 -等等
- 所有其他文件 -卖主 -节点模块 -资源 -等等
<!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>
我正在使用webpack.mix.js:
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css');
我已经用ftp完成了所有的传输,我知道这不是最好的解决方案,但我必须这样做。
这是我关于stackOverFlow的第一个问题,所以我希望已经足够清楚了。
谢谢,您的资产(js、css)可能会被缓存,请尝试在不同的浏览器中打开您的页面,或者打开Chrome开发工具并选中“禁用缓存”(Chrome开发工具处于打开状态)选项,然后重新加载页面
右键单击->检查->网络选项卡->禁用缓存
然后使用cmd+r
或刷新按钮重新加载页面
vue.js是否在控制台中抛出任何错误?不,没有错误,vue devtools告诉我在页面上检测到vuejs
<template>
<div>
<transition name="fade">
<router-view></router-view>
</transition>
</div>
</template>
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');};
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css');