好资源导航 » 文章资讯 » Vue CLI3搭建的项目中路径相关问题的解决

Vue CLI3搭建的项目中路径相关问题的解决

2023-09-08 03:31:04 62

这是开头

最近在试水VueCLI3，并且尝试配置一个多页面（多应用）项目出来，期间又遇到各种路径问题，于是...于是有了下面的唠叨。

以下都是基于VueCLI3来举例说明的，使用2.x版本的其实也类似

首先，参考官方文档对静态资源处理的说明，并通过自己的实践，可以总结出以下内容

静态资源可以通过两种方式进行处理:

1、以下情况下，资源不会被webpack处理，而是被直接拷贝：

放置在public目录下，即使未被使用。
通过绝对路径被引用，即以/开头的路径。

2、以下情况下，资源会被webpack处理（URL的resolve、minify、uglify、转base64等）：

使用JavaScript导入。
在template/CSS中通过相对路径（即以.开头或直接以文件（夹）名开头）被引用。
URL以~开头，其后的任何内容都会作为一个模块请求被解析。
URL以@开头，它也会作为一个模块请求被解析（@是在webpack设置的alias）。

我们应该根据实际情况去选择我们要引用的资源是否要被处理，然后用对应的、正确的方式去引用它们以达到目的。以下对使用绝对路径和相对路径的方法和注意事项进行描述。

使用绝对路径

默认情况下，VueCLI会假设你的应用是被部署在一个域名的根路径上（对应选项baseUrl:'/'），例如https://www.my-app.com/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在https://www.my-app.com/my-app/，则设置baseUrl为/my-app/。正因为以上的可能情况，我们应该在打算引用纯静态资源（那些不被webpack处理的资源，一般就是public目录下的资源）的时候，都确保使用baseUrl作为URL的开头，以下列举在不同文件中配合baseUrl选项写绝对路径的使用方法和注意事项：

在入口html文件中使用

我们可以使用lodashtemplate语法插入baseUrl：

favicon.ico"rel="externalnofollow">

在*.vue中使用

我们可以通过VueCLI提供的客户端环境变量process.env.BASE_URL来获取baseUrl：

/*在需要的组件中定义baseUrl，然后在

Vue CLI3搭建的项目中路径相关问题的解决

热门推荐

随机推荐