在ASP.NET Razor Pages中使用Vue3模块化开发的问题及调试求助

一、核心困境：非模块环境无法使用Vue组件import #

在Razor Pages的脚本块中加载Vue3后，无法像独立Vue项目那样用import引入组件和工具类，原代码执行报错：

@section Scripts{
  <script src="https://unpkg.com/vue@3"></script>
  <script>
    // 以下import语句在非模块环境下完全失效
    import { createApp } from "vue";
    import PopupManager from "/vue3/src/services/PopupManager.js";
    import App from "./App.vue";
    import Datepicker from '/vue3/node_modules/vuepic/vue-datepicker';
    
    const app = Vue.createApp({
      data(){ 
        return { 
            model: @Html.Raw(JsonSerializer.Serialize(Model))
        };
      },
    })
    // 后续组件注册、服务注入代码无法执行
    app.mount('#vueAppRoot');
  </script>
}

二、已尝试的临时方案：全局变量式组件 #

目前只能通过单独加载组件JS文件的方式使用，组件需写成全局变量形式：

组件文件示例（IconState.js） #

const IconState = {
  template:
    `<span class="icon iconState">
      <svg viewBox="0 0 15192 15190">
        <path :class="{ medGray: !complete, iconColor: complete }" d="M7596 0c4195,0 7596,3400 7596,7595 0,4195 -3401,7595 -7596,7595 -4195,0 -7596,-3400 -7596,-7595 0,-4195 3401,-7595 7596,-7595z"/>
        <template v-if="!complete">
          <path class="lightGray" d="M7596 748c3782,0 6848,3066 6848,6847 0,3782 -3066,6847 -6848,6847 -3782,0 -6848,-3065 -6848,-6847 0,-3781 3066,-6847 6848,-6847z"/>
        </template>
        <template v-else>
          <path class="white" d="M12087 6142c422,-423 422,-1113 0,-1536 -423,-422 -1113,-422 -1536,0l-4196 4196 -1714 -1714c-422,-423 -1113,-423 -1535,0 -423,423 -423,1113 0,1536l2481 2481c423,423 1113,423 1536,0l4964 -4963z"/>
        </template>
      </svg>
    </span>`,
  name: "IconState",
  props: {
    complete: {
      type: Boolean,
      default: true,
    },
  },
};

Razor中加载组件 #

@section Scripts {
  <script type="text/javascript" src="https://unpkg.com/vue@3.2.40"></script>
  <script type="text/javascript" src="~/js/vue/icons/IconHelp.js"></script>
  <script type="text/javascript" src="~/js/vue/icons/IconState.js"></script>
  <script type="text/javascript">
    const { createApp } = Vue;
    let vueApp = createApp({
      data() { return {
        model: @Html.Raw(JsonSerializer.Serialize(Model)),
        acceptedAddress: false,
      }},
      methods: {
        showPopup() {
            this.$popUpManager.showPopup("AddressPopup", null);
        },
      }
    });
    vueApp.component("IconHelp", IconHelp);
    vueApp.component("IconState", IconState);
    vueApp.mount('#vueAppRoot');
  </script>
}

但这种方式无法使用.vue单文件组件，也无法进行单元测试，开发体验极差。

三、解决方案：编译Vue组件为全局可用的UMD/IIFE包 #

要保留标准Vue项目的开发体验（单文件组件、单元测试），同时适配Razor的非模块环境，可通过Vite将组件编译为UMD/IIFE格式：

1. 创建独立Vue组件项目 #

用Vite初始化项目，配置打包输出为全局可用格式：

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  build: {
    lib: {
      entry: 'src/index.js',
      name: 'VueAppComponents',
      formats: ['umd', 'iife'],
      fileName: (format) => `vue-components.${format}.js`
    },
    rollupOptions: {
      external: ['vue'],
      output: {
        globals: {
          vue: 'Vue'
        }
      }
    }
  }
})

2. 导出组件与工具类 #

在src/index.js中统一导出需要用到的组件、服务：

import IconState from './components/IconState.vue'
import PopUp from './components/PopUp.vue'
import PopupManager from './services/PopupManager.js'
import dayjs from 'dayjs'

export { IconState, PopUp, PopupManager, dayjs }

3. 编译并引入到Razor项目 #

执行npm run build，将生成的vue-components.umd.js放入ASP.NET项目的wwwroot/js/vue目录，然后在Razor中加载：

@section Scripts {
  <script src="https://unpkg.com/vue@3.2.40"></script>
  <script src="~/js/vue/vue-components.umd.js"></script>
  <script>
    const { createApp } = Vue;
    // 从全局变量中获取编译后的组件和工具
    const { IconState, PopUp, PopupManager, dayjs } = VueAppComponents;

    let vueApp = createApp({
      data() {
        return {
          model: @Html.Raw(JsonSerializer.Serialize(Model)),
          acceptedAddress: false
        }
      },
      methods: {
        showPopup() {
          this.$popUpManager.showPopup("AddressPopup", null);
        }
      }
    });

    // 注册组件
    vueApp.component("IconState", IconState);
    vueApp.component("PopUp", PopUp);
    // 注入全局服务
    vueApp.config.globalProperties.$popUpManager = PopupManager;
    vueApp.config.globalProperties.$dayJs = dayjs;

    vueApp.mount('#vueAppRoot');
  </script>
}

四、调试错误：Uncaught SyntaxError: Unexpected token ':' 解决 #

1. 排查Razor渲染后的代码：右键查看页面源代码，定位报错行，检查@Html.Raw(JsonSerializer.Serialize(Model))是否生成了非法JS语法（比如日期格式、未转义的特殊字符），可先将序列化结果打印到控制台验证：

   <script>
     console.log(@Html.Raw(JsonSerializer.Serialize(Model)));
   </script>
   

2. 启用源映射：确保Vite打包时生成.map文件，在浏览器开发者工具的Settings中开启Enable JavaScript source maps和Disable cache，可直接在原始.vue文件中打断点。
3. 检查模板语法：手写组件模板时，注意引号转义问题，避免Vue模板语法（如:class）与外层字符串冲突。

内容的提问来源于stack exchange，提问作者GeeWhizBang