Vue.js 无法使用Vite.js更改Vue 3中的publicPath

在本文中，我们将介绍在使用Vite.js时，如何更改Vue 3项目中的publicPath。

理解publicPath

在Vue项目中，publicPath被用于指定项目资源的基础URL。默认情况下，publicPath是”/”，即资源的基础路径为根目录。然而，在某些特定场景中，我们可能需要更改publicPath，比如在部署项目到不同环境时，资源的路径可能不相同。

Vue 2中的publicPath更改

在Vue 2中，我们可以通过配置vue.config.js文件中的baseUrl来更改publicPath。例如，我们可以将publicPath更改为”/myapp/”，如下所示：

// vue.config.js

module.exports = {
  baseUrl: '/myapp/'
}

这样一来，项目资源的基础路径就变成了”/myapp/”，所有资源的URL都会相应地加上该前缀。

Vue 3与Vite.js的变化

Vue 3是下一代的Vue.js框架，相较于Vue 2，在构建工具方面进行了一些重大变化。Vite.js是一种新型的构建工具，它在开发过程中不需要打包，可以实现更快的冷启动和热更新速度。然而，Vite.js默认情况下不支持更改publicPath。

Vite.js的目标是在开发环境下快速构建项目，而将打包工作留给了生产环境。因此，它默认情况下假设项目资源是部署在根目录的，所以没有提供直接修改publicPath的选项。

如何在Vue 3中更改publicPath

虽然Vite.js默认情况下不支持更改publicPath，但我们仍然可以通过一些技巧来实现这一目标。

假设我们的目标是将publicPath更改为”/myapp/”。首先，我们需要在项目的index.html文件中手动添加一个base标签，并将href属性设置为目标publicPath：

<!-- public/index.html -->

<head>
  <base href="/myapp/">
</head>

然后，我们需要在项目的main.js文件中手动删除base标签，以防止重复添加：

// src/main.js

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

// Remove the base tag to avoid duplication
const base = document.getElementsByTagName('base')
if (base.length > 0) {
  base[0].parentNode.removeChild(base[0])
}

app.mount('#app')

现在，我们的Vue 3项目的publicPath就被更改为了”/myapp/”。所有资源的URL都会自动加上该前缀。

总结

本文介绍了在Vue 3与Vite.js中如何更改publicPath的方法。尽管Vite.js默认情况下不支持直接修改publicPath，但我们可以通过手动添加base标签和删除重复标签的方式来实现这一目标。这个方法适用于需要更改publicPath的特殊场景，可以帮助我们灵活地部署Vue 3项目。希望本文对你有所帮助！