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 cli 3部署资源路径的详细内容。