错误：无法从"js/app.js"中找到模块"js/components/customer"

Question

我的 Vue 组件没有显示在浏览器中，import customer from "./components/customer"给了我一个错误

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

波纹管是我的代码

资产/JS/应用程序.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>

assets/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>

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

Answer 1

https://github.com/vuejs-templates/webpack-simple/issues/130

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

resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    },
    extensions: ['*', '.js', '.vue', '.json']
},

Answer 2

由于您使用的是 Phoenix，请参阅此建议 - https://codeburst.io/how-to-setup-graphql-vue-js-and-phoenix-1-3-part-2-the-frontend-716e8d980407

它解释说凤凰城不使用webpack，而是使用早午餐。

我注意到在导入 Vue 文件时他们的代码中有所不同的一点是，他们明确添加了 .vue 扩展名。

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