Laravel-项目文件夹外的公用目录-Vue不工作_Laravel_Vue.js_Path

Laravel-项目文件夹外的公用目录-Vue不工作

laravel vue.js path

Laravel-项目文件夹外的公用目录-Vue不工作,laravel,vue.js,path,Laravel,Vue.js,Path,我到处搜索，找到的所有答案都只解释了如何重命名公用文件夹。在我的情况下，公用文件夹位于项目文件夹之外： basefolder/ Laravel/ public_html/ 我已经完成了重命名文件夹的所有更改，以及除vue之外的所有工作在网页文件中，我输入了以下内容： mix.setPublicPath('../public_html/'); mix.js('resources/js/app.js', 'js') .sass('resources/sass/app.scss', 'cs

我到处搜索，找到的所有答案都只解释了如何重命名公用文件夹。在我的情况下，公用文件夹位于项目文件夹之外：

basefolder/
  Laravel/
  public_html/

我已经完成了重命名文件夹的所有更改，以及除vue之外的所有工作

在网页文件中，我输入了以下内容：

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

编译，并在适当的文件夹中编译css和js文件。在我的app.js中，我声明：

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

并且文件components/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>

及

您有两个问题：

由于Webpack，您应该将组件目录命名为别名，顺便说一句，它将始终使用绝对路径

在

webpack.mix.js

中：

mix.webpackConfig({
决心：{
扩展：['.js'，'.vue']，
别名：{'@'：`${uu dirname}/resources`}，
},
输出：{
公共路径：“/”，
chunkFilename:'js/[name].[chunkhash].js'，
},
});

从“@/js/components/SetFavorite”导入SetFavorite；

如果最后一个示例是HTML文档的源代码，则它不起作用，因为web浏览器不知道
```
import
```
和
```
export
```
。您必须从一个资产开始，使用Laravel Mix构建它，并将输出包含到HTML中，这要感谢

谢谢您的回答。。我不确定我是否完全理解。第一段代码是做什么的？我应该将其添加到网页包中，还是将其替换为Eisting？最后一个示例是我在浏览器中看到的源代码。我遵循了本教程：第一段代码是一个Webpack配置，您可以从Laravel Mix注入，您只需在编译资产之前将其复制粘贴到

Webpack.Mix.js

文件中即可。最后一个示例无法像我说的那样工作，因为您的浏览器不理解这种JavaScript。谢谢，导入问题已经解决。。但是现在我仍然有错误

未知自定义元素：-您正确注册了组件吗？对于递归组件，请确保提供“名称”选项。

请编辑您的帖子，并显示模板中使用

的整个组件关于

问题，这将更难修复，因为当您使用Laravel Mix构建资产时，通常的方法是在刀片文件中添加

，并包括您的构建JS，它创建了一个根在此

div

上的Vue实例。告诉我你是否想试试这个，但是它需要很大的改变。

 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">
...
...

@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