Vue.js 为什么vue 3呈现空html？

我将VUE3与codeigniter和webpack一起使用

我使用的软件包是：

  "devDependencies": {
    "@babel/cli": "^7.14.3",
    "@babel/core": "^7.14.3",
    "@babel/plugin-transform-runtime": "^7.14.3",
    "@babel/preset-env": "^7.14.4",
    "@babel/preset-typescript": "^7.13.0",
    "@vue/babel-plugin-jsx": "^1.0.6",
    "@vue/compiler-sfc": "^3.0.11",
    "@vue/component-compiler-utils": "^2.3.1",
    "babel-loader": "^8.2.2",
    "clean-webpack-plugin": "^4.0.0-alpha.0",
    "css-loader": "^5.2.6",
    "css-minimizer-webpack-plugin": "^3.0.1",
    "dotenv-webpack": "^7.0.3",
    "html-minimizer-webpack-plugin": "^3.1.0",
    "html-webpack-plugin": "^5.3.1",
    "jquery": "^3.6.0",
    "mini-css-extract-plugin": "^1.6.0",
    "postcss-loader": "^5.3.0",
    "sass": "^1.34.1",
    "sass-loader": "^10.2.0",
    "style-loader": "^2.0.0",
    "terser-webpack-plugin": "^5.1.3",
    "vue-loader": "^16.2.0",
    "vue-style-loader": "^4.1.3",
    "vue-template-compiler": "^2.6.13",
    "webpack": "^5.38.1",
    "webpack-cli": "^4.7.0",
    "webpack-dev-server": "^3.11.2"
  },
  "dependencies": {
    "@vuelidate/core": "^2.0.0-alpha.19",
    "@vuelidate/validators": "^2.0.0-alpha.16",
    "apexcharts": "^3.26.3",
    "axios": "^0.21.1",
    "feather-icons": "^4.28.0",
    "http-build-query": "^0.7.0",
    "numeral": "^2.0.6",
    "remove": "^0.1.5",
    "v-select2-component": "^0.4.7",
    "vue": "^3.0.11",
    "vue-apexcharts": "^1.6.1",
    "vue-axios": "^3.2.4",
    "vue-bootstrap-selectpicker": "^1.0.6",
    "vue-bootstrap-slider": "^2.1.8",
    "vue-feather": "^1.1.1",
    "vue-filter-number-format": "^3.0.1",
    "vue-recaptcha-v3": "^2.0.1",
    "vue-scrollto": "^2.20.0",
    "vue-sweetalert2": "^4.3.1",
    "vue3-apexcharts": "^1.4.0",
    "vuex": "^4.0.1"
  }

我的应用程序是：

import {createApp} from 'vue'

const AttributeBindingApp = {
    data() {
        return {
            message: 'You loaded this page on ' + new Date().toLocaleString()
        }
    }
}

const application = createApp(AttributeBindingApp).mount('#app')

我通过网页包构建我的应用程序，并通过脚本标签插入html文件 我的html代码是：

<div id="app">
hello {{message}}
</div>
<script src="<?= base_url() ?>/js/app.js?v=4563"></script>

你好{{message}}
浏览器控制台显示什么？呈现的HTML页面显示什么？为什么要在HTML文件中编写代码？您是否有App.vue文件？还是不想要该文件？浏览器控制台不显示任何内容。没有代码问题，因为像Mount这样的函数是正确执行的。唯一的显示问题是我想使用我的Vue应用程序组件。我的HTML文件代码在上面。你还有别的意思吗？