无法从jsp页面访问vue组件答案

【问题标题】：Unable to access vue component from a jsp page无法从jsp页面访问vue组件
【发布时间】：2019-09-11 06:24:42
【问题描述】：

我正在尝试在我的 jsp 页面中实现一个 vue 组件。我尝试使用 type="module" 访问具有导入、导出语句的 js 文件来编写脚本标记，并且文件已成功加载和执行。但是在该 js 文件中执行 import 语句时，它在控制台中返回以下错误：

加载模块脚本失败：服务器以非 JavaScript MIME 类型“”响应。根据 HTML 规范对模块脚本强制执行严格的 MIME 类型检查。

下面是我的jsp代码

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<script type="module" src="../../../../js/serviceMap/packages/AssignList/index.js"></script>

下面是js文件中的一段代码

import OpsAssignList from './src/AssignList.vue'

OpsAssignList.install = function install(Vue) {
  Vue.component(OpsAssignList.name, OpsAssignList)
};

export default OpsAssignList

注意：我想在我现有的 jsp 页面以及我们的独立项目中使用我的 vue 组件。所以我正在尝试使用包含导入组件等的 js 文件来访问 vue 组件。

如何使用此程序实现两者？在我的开发活动中受到打击。

Attached the image of browser console for reference

【问题讨论】：

此链接可能对您有所帮助*.com/questions/54964965/…
我正在尝试使用外部脚本在我的 jsp 页面中初始化 vue 组件（即具有 ES6 语句的 js 文件，即导入）......但在上面提供的链接中，他们正在这样做使用脚本标签。顺便说一句，谢谢。

标签： jsp vue.js

【解决方案1】：

当你像这样加载 Vue 时。

  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.8/dist/vue.js"></script>

然后您必须将所有内容保存在 .js 文件中。不要写 import 语句。即使 webpack 在构建后也会做同样的过程，所有 es6 都会转换为 js，它会包含在 app.87cbdfb9.js 中

   <script src="/your-app/js/app.87cbdfb9.js"></script>

这将包含在您的主 index.html 文件中，如上

** 对于没有 webpack 的独立 *** 然后像这样跟随

<html>
<body>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

 <!-- templates for your components -->
  <template id="assign-list">
    <div>test</div>
  </template>
      <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
      <script src="https://unpkg.com/vue-router@3.0.1/dist/vue-router.js"></script> 

      <!-- Your Vue Root component should be last -->
      <script type="text/javascript" src="/app/AssignList.js"></script> 

    </body>
    </html>

你的 AssignList.js 文件应该是这样的

var AssignList = Vue.component('assign-list',
  {
    template: '#assign-list', // should match the ID of template tag
    data: function()
    {

    },
    methods:
    {
    }
  });

【讨论】：

我正在尝试将我的 vue 文件用于当前的 jsp 项目以及我的独立 vue 项目。我可以在我的独立项目中使用该 .vue 文件访问该组件，但无法在我的 jsp 页面中使用它。如何在我的 jsp 文件中成功使用该 .vue 文件（这样我就不需要为我的 2 个项目维护 2 个文件？这是我的主要问题。自 2 周以来一直在尝试解决。（尝试了一些其他方法，称为“http -vue-loader" 但我仍然没有成功。[来源：github.com/FranckFreiburger/http-vue-loader]) 你能帮我解决这个问题吗？谢谢