Laravel - Каталог Publi c вне папки проекта - Vue не работает - PullRequest
Новая
       6

Laravel - Каталог Publi c вне папки проекта - Vue не работает

1 голос
/ 16 апреля 2020

Я искал везде, и все ответы, которые я нашел, объясняют только, как переименовать папку publi c. В моем случае папка publi c находится вне папки Project: 

basefolder/
  Laravel/
  public_html/

Я внес все изменения, которые нашел для папки переименования, и все работает, кроме vue.

В файле веб-пакета я ввел следующее: 

mix.setPublicPath('../public_html/');
mix.js('resources/js/app.js', 'js')
.sass('resources/sass/app.scss', 'css');

скомпилировано, и оно скомпилировало файлы css и js в соответствующей папке. В моем приложении. js я объявил это: 

Vue.component('set-fav', require('./components/SetFavorite.vue').default);

и файловые компоненты / SetFavorite. vue существует и имеет свое содержимое ... 

<template>
<div>
    <input type="image" src="/images/favorite.png" border="0" alt="Favorite"  @click="setfavorite" />
</div>
</template>

<script>
export default {
    props: ['photogId','galId','photoname'],
    mounted() {
        console.log('Component mounted.')
    },

    methods: {
        setfavorite(){
            axios.get('/' + this.photogId + '/' + this.galId + '/' + this.photoname + '/like')
                .then(response => {
                    alert(response.data);
                });
        }
    }
}
</script>

при загрузке страница, я не вижу изображения. Вместо этого в консоли разработчика я вижу 2 сообщения об ошибках: 

 Uncaught SyntaxError: Cannot use import statement outside a module

и 

app.js:38062 [Vue warn]: Unknown custom element: <set-fav> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

(found in <Root>)

, и если я смотрю на источник моей страницы, она начинается так: 

<script>
import SetFavorite from "../../js/components/SetFavorite";
export default {
    components: {SetFavorite}
}
</script>

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
...
...

Теперь, относительно моего индекса. php файла, путь ../../js/components/SetFavorite не существует .. правильный существующий путь будет ../Laravel/js/components/SetFavorite

Что мне нужно сделать, чтобы чтобы это исправить?

Спасибо

РЕДАКТИРОВАТЬ, код зрения 

@extends('layouts.client')

@section('content')
<div class="container">
@if($gallery->webgal == 1)
<div class="row d-flex justify-content-around pb-3">
    <h1>{{$gallery->galname}}</h1>
</div>
    <div class=" row pt-1 card-deck">
    @foreach($gallery->photos as $photo)

        <div class="col-12 col-md-6 col-sm-12 p-1 " >
                <div class="w-100 d-flex shadow justify-content-between card" style="background-color: lightgray">

                    <div class="w-100 m-0 p-0" style="width: 350px;  height: 350px;">
                        <a data-fancybox="gallery" href="/images/{{auth()->user()->phcode}}/{{$gallery->galcode}}/wm/wm_{{$photo->filename}}">
                            <img class="card-img" src="/images/{{auth()->user()->phcode}}/{{$gallery->galcode}}/thumb/thumb_{{$photo->filename}}" style="
                        width:100%;
                        height:100%;
                        object-fit: scale-down;">
                        </a>
                    </div>

                    <div class="card-footer w-100  d-flex justify-content-around" style="font-size: smaller;">
                        <div class="d-flex justify-content-around w-100">
                            <div>
                                {{$photo->filename}}
                            </div>
                            <div>
                                <button>Download (Hi-Res)</button>
                            </div>
                            <div>
                                <button>Download (Social Res)</button>
                            </div>
                            <div>
                                <set-fav photogId="{{$gallery->user->phcode}}" galId="{{$gallery->galcode}}" photoId="{{$photo->filename}}" name="fav{{$photo->id}}"></set-fav>
                            </div>
                        </div>
                    </div>
                </div>
        </div>
    @endforeach
</div>
@else
    <div class="row d-flex justify-content-around pb-3">
        <h1>Nothing here... :)</h1>
    </div>
@endif
</div>

@endsection

1 Ответ

1 голос
/ 16 апреля 2020

У вас есть 2 проблемы:

  • Вы должны создать псевдоним вашего каталога компонентов благодаря Webpack, так как он всегда будет использовать абсолютный путь

В вашем webpack.mix.js: 

mix.webpackConfig({
    resolve: {
        extensions: [ '.js', '.vue' ],
        alias     : { '@': `${ __dirname  }/resources` },
    },
    output: {
        publicPath   : '/',
        chunkFilename: 'js/[name].[chunkhash].js',
    },
});

import SetFavorite from '@/js/components/SetFavorite';
  • Если последний образец является исходным кодом вашего HTML документа, он не работает, потому что import и export неизвестны веб браузер. Вы должны сделать это из актива, собрать его с Laravel Mix и включить вывод в ваш HTML благодаря 
<script type="text/javascript" src="{{ mix(...) }}"></script>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...