Vue3 Vite Build：告别空白页面，轻松实现页面显示

2023-04-28 00:09:26

Vue3 Vite 构建：告别空白页面，轻松实现页面显示

作为前端开发者，你在使用 Vue3 Vite 构建项目时是否遇到过这样的问题：页面一片空白，没有任何内容显示，也没有任何错误提示？别担心，你不是一个人！

问题根源

这个问题的根源在于 Vue3 Vite 的构建过程。在构建过程中，Vite 会将你的项目代码和资源打包成一个或多个文件。打包完成后，Vite 会在你的项目目录中生成一个名为 dist 的文件夹。在这个文件夹中，你会找到构建后的代码和资源文件。

解决方案：添加 base

要解决这个问题，你需要在你的 vite.config.js 文件中添加一个 base 选项。这个选项告诉 Vite，在构建过程中，应该使用哪个路径作为构建后的外部资源的根路径。

// vite.config.js
module.exports = {
  base: '/my-app/',
};

在上面的示例中，我们设置了 base 选项的值为 /my-app/。这意味着，在构建过程中，Vite 会将构建后的外部资源放在 /my-app/ 这个目录下。

如何添加 base

打开你的项目目录中的 vite.config.js 文件。
在 module.exports 对象中，添加一个 base 选项。
将 base 选项的值设置为 /my-app/ 或你想要的任何路径。
保存文件。

效果

添加 base 选项后，你就可以正常显示构建后的页面了。这是因为 Vite 会将构建后的外部资源放在你指定的目录下，并且在你的 HTML 文件中添加相应的引用。

总结

添加 base 选项是一种简单有效的解决 Vue3 Vite 构建后页面空白问题的方法。这种方法适用于任何使用 Vite 构建的项目。希望本文能够帮助你解决这个问题，让你轻松实现页面显示。

常见问题

1. 为什么添加 base 选项后，页面就可以正常显示了？

添加 base 选项后，Vite 会将构建后的外部资源放在你指定的目录下，并且在你的 HTML 文件中添加相应的引用。这样，浏览器就可以找到并加载这些资源，从而正常显示页面。

2. 我该如何在生产环境中使用 base 选项？

在生产环境中，你可以通过设置 base 选项的值来指定构建后的外部资源的根路径。例如，你可以将 base 选项的值设置为 /my-app/。这样，构建后的外部资源就会放在 /my-app/ 这个目录下。

3. 我可以将 base 选项设置为任何值吗？

是的，你可以将 base 选项设置为任何值。但是，你应该确保这个值是一个有效的路径，并且你已经将构建后的外部资源放在这个路径下。

4. 如何在 Vite 中使用 html 插件配置 base 选项？

在 Vite 中，你可以使用 html 插件来配置 base 选项。具体操作如下：

// vite.config.js
import { defineConfig } from 'vite';
import { createHtmlPlugin } from 'vite-plugin-html';

export default defineConfig({
  plugins: [
    createHtmlPlugin({
      base: '/my-app/',
    }),
  ],
});

5. 如何在 Vite 中使用 base 选项配置 CDN 链接？

在 Vite 中，你可以使用 base 选项来配置 CDN 链接。具体操作如下：

// vite.config.js
export default defineConfig({
  base: '/my-app/',
  build: {
    assetsInlineLimit: 0,
    rollupOptions: {
      output: {
        chunkFileNames: '[name].[hash].js',
        entryFileNames: '[name].[hash].js',
        assetFileNames: '[name].[hash].[ext]',
      },
    },
  },
});