如何设置vue-cli的publicPath以适应不同环境？

2026-04-03 09:281阅读0评论SEO问题

内容介绍
文章标签
相关推荐

本文共计1233个文字，预计阅读时间需要5分钟。

几种设置publicPath后，对比打包后的index.文件及测试背景：- 每次打包build完成后，都单独生成一个/dist文件夹。- /dist中每次打包后只包含相同的文件目录。- 部署时，是部署在服务器的/t目录下。

几种设置publicPath后，再对比打包后的index.html文件

测试背景：

每次打包build完后，都单独生成一个/dist文件夹，且dist中每次都只有相同文件目录
部署的时候，是部署在服务器的一个/test文件夹下

打包后的文件目录：

├─dist ├─css ├─img └─js index.html

一、不设置publicPath时，部署后请求路径：

111.222.333.444:8888/css/app.0b79487b.css

// vue.config.js module.exports = { // publicPath: '', }

<!DOCTYPE html> <html lang=en> <head> <title>test</title> <link href=/css/app.0b79487b.css rel=preload as=style> <link href=/js/app.ba2d9b8a.js rel=preload as=script> <link href=/js/chunk-vendors.e7ac9ff2.js rel=preload as=script> <link href=/css/app.0b79487b.css rel=stylesheet> </head> <body> <div id=app></div> <script src=/js/chunk-vendors.e7ac9ff2.js></script> <script src=/js/app.ba2d9b8a.js></script> </body> </html>

二、设置为/时，部署后请求路径：

111.222.333.444:8888/css/app.0b79487b.css

// vue.config.js module.exports = { publicPath: '/', }

三、设置为./时，部署后请求路径：

111.222.333.444:8888/test/css/app.0b79487b.css

// vue.config.js module.exports = { publicPath: './', }

<!DOCTYPE html> <html lang=en> <head> <title>test</title> <link href=css/app.0b79487b.css rel=preload as=style> <link href=js/app.8569d42d.js rel=preload as=script> <link href=js/chunk-vendors.e7ac9ff2.js rel=preload as=script> <link href=css/app.0b79487b.css rel=stylesheet> </head> <body> <div id=app></div> <script src=js/chunk-vendors.e7ac9ff2.js></script> <script src=js/app.8569d42d.js></script> </body> </html>

四、设置为static时，部署后请求路径：

111.222.333.444:8888/test/static/css/app.0b79487b.css

// vue.config.js module.exports = { publicPath: 'static', }

<!DOCTYPE html> <html lang=en> <head> <title>test</title> <link href=static/css/app.0b79487b.css rel=preload as=style> <link href=static/js/app.d0717808.js rel=preload as=script> <link href=static/js/chunk-vendors.e7ac9ff2.js rel=preload as=script> <link href=static/css/app.0b79487b.css rel=stylesheet> </head> <body> <div id=app></div> <script src=static/js/chunk-vendors.e7ac9ff2.js></script> <script src=static/js/app.d0717808.js></script> </body> </html>

五、设置为./static时，部署后请求路径：

111.222.333.444:8888/test/static/css/app.0b79487b.css

// vue.config.js module.exports = { publicPath: './static', }

六、设置为../static时，部署后请求路径：

111.222.333.444:8888/static/css/app.0b79487b.css

// vue.config.js module.exports = { publicPath: '../static', }

<!DOCTYPE html> <html lang=en> <head> <title>test</title> <link href=../static/css/app.0b79487b.css rel=preload as=style> <link href=../static/js/app.695b7ccc.js rel=preload as=script> <link href=../static/js/chunk-vendors.e7ac9ff2.js rel=preload as=script> <link href=../static/css/app.0b79487b.css rel=stylesheet> </head> <body> <div id=app></div> <script src=../static/js/chunk-vendors.e7ac9ff2.js></script> <script src=../static/js/app.695b7ccc.js></script> </body> </html>

七、设置为../时，部署后请求路径：

111.222.333.444:8888/css/app.0b79487b.css

// vue.config.js module.exports = { publicPath: '../', }

<!DOCTYPE html> <html lang=en> <head> <title>test</title> <link href=../css/app.0b79487b.css rel=preload as=style> <link href=../js/app.67ace555.js rel=preload as=script> <link href=../js/chunk-vendors.e7ac9ff2.js rel=preload as=script> <link href=../css/app.0b79487b.css rel=stylesheet> </head> <body> <div id=app></div> <script src=../js/chunk-vendors.e7ac9ff2.js></script> <script src=../js/app.67ace555.js></script> </body> </html>

到此这篇关于vue-cli设置publicPath小记的文章就介绍到这了,更多相关vue-cli设置publicPath内容请搜索易盾网络以前的文章或继续浏览下面的相关文章希望大家以后多多支持易盾网络！

标签：VueCLI publicPath 小记几种

本文共计1233个文字，预计阅读时间需要5分钟。

几种设置publicPath后，再对比打包后的index.html文件

测试背景：

每次打包build完后，都单独生成一个/dist文件夹，且dist中每次都只有相同文件目录
部署的时候，是部署在服务器的一个/test文件夹下

打包后的文件目录：

├─dist ├─css ├─img └─js index.html

一、不设置publicPath时，部署后请求路径：

111.222.333.444:8888/css/app.0b79487b.css

// vue.config.js module.exports = { // publicPath: '', }

二、设置为/时，部署后请求路径：

111.222.333.444:8888/css/app.0b79487b.css

// vue.config.js module.exports = { publicPath: '/', }

三、设置为./时，部署后请求路径：

111.222.333.444:8888/test/css/app.0b79487b.css

// vue.config.js module.exports = { publicPath: './', }

四、设置为static时，部署后请求路径：

111.222.333.444:8888/test/static/css/app.0b79487b.css

// vue.config.js module.exports = { publicPath: 'static', }

五、设置为./static时，部署后请求路径：

111.222.333.444:8888/test/static/css/app.0b79487b.css

// vue.config.js module.exports = { publicPath: './static', }

六、设置为../static时，部署后请求路径：

111.222.333.444:8888/static/css/app.0b79487b.css

// vue.config.js module.exports = { publicPath: '../static', }

七、设置为../时，部署后请求路径：

111.222.333.444:8888/css/app.0b79487b.css

相关推荐

相关推荐