vue3 vite 打包 二级目录刷新空白

控制台报错:Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

打包路径问题,修改vite.config.ts文件的base

export default defineConfig({
  plugins: [vue()],
  base: '/',    // 改为 根目录  /
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  css: {
    preprocessorOptions: {
      less: {
        additionalData: `@import "@/assets/css/index.less";`
      }
    }
  }
})
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
对于使用 Qiankun、Vue 3 和 Vite 进行打包的场景,你可以按照以下步骤进行操作: 1. 首先,确保你已经完成了项目的开发,并且在本地可以正常运行。 2. 进入你的项目根目录,并执行以下命令安装 Qiankun 和 Vite 相关的依赖: ``` npm install qiankun @vue/cli-plugin-vue-next ``` 或者 ``` yarn add qiankun @vue/cli-plugin-vue-next ``` 3. 在你的项目根目录下创建一个名为 `vite.config.js` 的文件,并添加以下内容: ```javascript import { defineConfig } from 'vite'; export default defineConfig({ base: '/your-sub-app-base-path/', }); ``` 将 `/your-sub-app-base-path/` 替换为你的子应用的基础路径,如果你的子应用是根路径,则直接使用 `/`。 4. 在 `src` 目录下创建一个名为 `main.js` 的文件,并添加以下内容: ```javascript import { createApp } from 'vue'; import App from './App.vue'; let app = null; function render() { app = createApp(App); app.mount('#app'); } if (!window.__POWERED_BY_QIANKUN__) { render(); } export async function bootstrap() { console.log('子应用 vue3 vite 启动'); } export async function mount(props) { render(); } export async function unmount() { app.unmount(); app = null; } ``` 5. 在 `package.json` 中添加以下内容: ```json { "name": "your-sub-app-name", "homepage": "/your-sub-app-base-path/", "scripts": { "build": "vue-cli-service build" } } ``` 将 `"your-sub-app-name"` 替换为你的子应用名称,`"/your-sub-app-base-path/"` 替换为你的子应用的基础路径。 6. 执行以下命令来进行打包: ``` npm run build ``` 或者 ``` yarn build ``` 这将在你的项目根目录下生成一个 `dist` 目录,其中包含了打包后的静态文件。 7. 最后,将生成的 `dist` 目录中的文件部署到你的服务器或者 CDN 上,以供在 Qiankun 主应用中加载使用。 完成上述步骤后,你的子应用就可以通过 Qiankun 进行加载和使用了。希望对你有所帮助!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值