Question

我正在尝试在我的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

Answer 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:
    {
    }
  });

无法从JSP页面访问Vue组件

1 个答案: