Vue.js 错误：找不到模块'；js/components/customer'；从'；js/app.js'；

我的Vue组件未显示在浏览器中，

从“/components/customer”导入客户

显示错误

我正在使用： -凤凰城1.3 -节点v8.14.0

下面是我的密码

assets/js/apps.js

import Vue from "vue";
import "axios";
import "./socket"; // To be used later

import customer from "./components/customer"; // this is the line that brings the error message
Vue.component("customer", customer);

new Vue({}).$mount("#takso-app");

lib/myApp/templates/pages/index.html.eex

<div id="takso-app" style="border:solid red 2px">
  <customer></customer>
</div>

资产/js/components/customer.vue

<template>
    <div>
        <input type="text" class="form-control" id="address" placeholder = "address" v-model="address">
    </div>
    <div>
    <textarea class="col-sm-12" style="background-color:#f4f7ff" rows="4" v-model="messages"></textarea>
    </div>
</template>

<script>
import axios from "axios";

export default {
    data: function() {
        return {
            address: "",
        }
    },
    methods: {
        submitBookingRequest: function() {
            axios.post("/api/bookings",
                {address: this.address})
                .then(response => {
                    this.messages = response.data.msg;
                }).catch(error => {
                    console.log(error);
                });
        }
    }
}

</script>

从“axios”导入axios；
导出默认值{
数据：函数（）{
返回{
地址：“，
}
},
方法：{
submitBookingRequest:函数（）{
axios.post（“/api/bookings”，
{地址：this.address}）
。然后（响应=>{
this.messages=response.data.msg；
}).catch（错误=>{
console.log（错误）；
});
}
}
}

我希望我的2个输入（地址和消息）应该在index.html.eex中可见

将/project目录/webpack.config.js更改为以下设置（只需添加扩展名）

---

由于您正在使用Phoenix，请参考以下建议-

它解释说凤凰不使用网页包，而是使用早午餐

我注意到的一点是，在导入Vue文件时，它们的代码不同，它们显式地添加了.Vue扩展名

import customer from "./components/customer.vue"; 

---

文件webpack.config.js不在我的项目目录中。我认为该决议适用于phoenix 1.2，因为在整个项目中没有这样一个文件，我真的不知道那是什么，但请看我的其他答案，它应该更相关。

import customer from "./components/customer.vue";