vue cli 3是vue.js官方提供的一个基于webpack的脚手架工具，用于快速搭建vue.js项目。随着vue.js在大规模应用中的普及，vue cli 3也成为了前端开发中不可或缺的一部分。然而，在实际部署vue cli 3项目时，很多开发者都会遇到资源路径的问题，导致项目无法正常运行。本篇文章将详细介绍vue cli 3部署资源路径的问题及解决方法。
一、Vue CLI 3的默认资源路径
Vue CLI 3中默认的资源路径是相对路径，即“./”。这意味着Vue CLI 3会自动识别你的资源文件（如图片、CSS、JS等）所在的目录，并将它们编译为相对路径的形式，以保证在任何环境下都能正确访问。
二、问题的出现
Vue CLI 3的默认资源路径看起来很方便，但实际应用中还是会遇到一些问题。其中一个常见的问题就是打包后的资源路径不正确，导致网页无法正常显示。这个问题通常是由于项目被部署到不同的环境中，路径不同导致的。
例如，如果将Vue CLI 3项目部署到服务端的根目录下，它的资源路径应该是“/static/example.png”。但是，如果将Vue CLI 3项目部署到服务端的子目录中，它的资源路径就会变成“/subdir/static/example.png”。此时，如果使用Vue CLI 3默认的相对路径，就无法正确读取资源文件，导致网页无法正常显示。
三、解决方法
为了解决资源路径的问题，Vue CLI 3提供了多种方式来设置资源路径。我们可以根据实际需要选择其中一种方式来解决问题。
- 使用publicPath参数
在vue.config.js文件中，可以使用publicPath参数来设置资源路径。publicPath参数指定打包后资源文件的相对路径，它可以是绝对路径或相对路径。例如：
module.exports = {
publicPath: '/subdir/'
};
上面的代码将所有的资源文件路径都添加了“/subdir/”前缀，这样即使部署到子目录下，也能正确加载对应的资源文件。
- 使用环境变量
在一些场景下，我们可能需要根据不同的部署环境来动态修改资源路径。这时，我们可以使用环境变量来解决问题。
在vue.config.js配置文件中，可以使用process.env.NODE_ENV环境变量来判断当前项目所处的环境。在开发环境中，我们可以设置资源路径为相对路径。而在生产环境中，我们可以将资源路径设置为绝对路径，以确保项目在不同环境下都能正确加载对应的资源文件。例如：
module.exports = {
publicPath: process.env.NODE_ENV === 'production'
? '/my-website/'
: '/'
};
上面的代码中，如果项目处于生产环境下，则资源路径为“/my-website/”，否则为相对路径。
- 使用CDN
在一些高流量的项目中，我们需要使用CDN来加速资源文件的加载。这时，我们可以使用Vue CLI 3提供的webpack配置来设置CDN路径。在vue.config.js中，可以通过chainWebpack方法来自定义Webpack配置。例如：
module.exports = {
chainWebpack: config => {
config.plugin('html')
.tap(args => {
args[0].cdn = 'https://cdn.example.com/';
return args;
});
}
};
上面的代码中，我们通过chainWebpack方法来自定义Webpack配置，将html-webpack-plugin插件的配置参数中的cdn属性设置为CDN的路径“https://cdn.example.com/”。
四、总结
Vue CLI 3是一款强大的脚手架工具，能够快速搭建Vue.js项目。然而，在实际应用中，Vue CLI 3的默认资源路径可能会出现问题，导致项目无法正常运行。为了解决这个问题，我们可以通过设置publicPath参数、使用环境变量或使用CDN等方式来定制资源路径，以确保项目在不同环境下都能正确加载对应的资源文件。本文介绍了这些解决方法，希望对大家有所帮助。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
