vue3.0 vue.config.js 配置基础的路径问题

配置Vue.js项目的构建后的静态文件的发布路径是非常必要的。在Vue.js 3.0中，配置静态资源的发布路径的方式有所改变。本文将提供Vue.js 3.0中的vue.config.js配置多个基础路径的示例说明。

创建Vue.js 3.0项目

使用Vue CLI 3创建Vue.js 3.0项目：

$ vue create my-project

vue.config.js 文件

创建一个 vue.config.js 文件，定义静态文件发布路径。在Vue.js 3.0中，需要使用 publicPath 属性配置静态资源的基本路径。

module.exports = {
  publicPath: '/app/'
};

这个配置定义了静态资源的基本路径为 /app/。所有的静态资源文件将被发布到这个路径下。

基本路径示例说明

下面是两个关于 publicPath 配置基本路径的具体示例说明：

1、基于域名发布

在实际生产环境中，为了将应用程序作为独立的应用部署，通常会将其发布到一个域名下。这种情况下，publicPath 应该被设置为跟域名相关。

module.exports = {
  publicPath: 'http://example.com/my-app/'
};

通过以上配置，所有的静态资源文件将被发布到 http://example.com/my-app/ 这个路径下。

2、基于相对路径发布

另一方面，我们可以将静态资源文件发布到相对路径下：

module.exports = {
  publicPath: './'
};

在这种情况下，所有静态资源文件将被发布到根目录下。

总结

以上便是在Vue.js 3.0中如何配置基础路径的攻略。使用 publicPath 配置项可以很容易地定义 webapck 输出文件的公共路径。

在现代化的web应用中，不要忘记在路由的 base 配置中同样定义基本路径，确保web应用程序完整运行。

const router = new VueRouter({
    mode: 'history',
    base: '/app/',
    routes: [
        // 路由...
    ]
})

以上代码中的 base 配置项与 publicPath 值相对应，确保在路由时，前端的路由也能正确地工作。