vue

2024-06-21 18:11| 来源: 网络整理| 查看: 265

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

测试背景：

每次打包build完后，都单独生成一个/dist文件夹，且dist中每次都只有相同文件目录部署的时候，前端打包的文件部署在服务器的一个静态资源目录下我们是放在这个目录下的根目录还是在这个目录下的一个文件夹内，都需要前端正确设置publicPath才能正确访问的。

打包后的文件目录：

├─dist ├─css ├─img └─js index.html 一、不设置publicPath时，既设置为''，部署后请求路径：

如果部署根目录 http://111.222.333.444:8888/css/app.0b79487b.css 如果部署/test目录 http://111.222.333.444:8888/test/css/app.0b79487b.css

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

注意：如果css中有写background: url('/images/bgc.jpg') no-repeat center center; 类似这种根目录的图片路径的话，第二种部署，这个图片是找不到的。

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

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

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

总结：这方式，我们要想访问到正确的目录，就需要把我们打包后的文件部署到服务器静态资源的根目录才行。部署/test目录，我们的js、css、图片都是找不到路径的。

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

如果部署根目录： http://111.222.333.444:8888/css/app.0b79487b.css 如果部署\test目录： http://111.222.333.444:8888/test/css/app.0b79487b.css

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

注意：如果css中有写background: url('/images/bgc.jpg') no-repeat center center; 类似这种根目录的图片路径的话，同样部署/test目录，这个图片是找不到的。

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

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

部署根目录，资源路径全不对。部署test目录，资源全不对。部署/static 资源也不对

// vue.config.js module.exports = { publicPath: 'static', } test 四+、设置为/test时 // vue.config.js module.exports = { publicPath: '/static', } test

部署在/static 目录下 http://111.222.333.444:8888/static/css/app.0b79487b.css

css中的background: url('/images/bgc.jpg') no-repeat center center; 同样拿不到。

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

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

// vue.config.js module.exports = { publicPath: './static', } test 六、设置为../static时，部署后请求路径：

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

// vue.config.js module.exports = { publicPath: '../static', } test 七、设置为../时，部署后请求路径：

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

// vue.config.js module.exports = { publicPath: '../', } test 总结说明：

我们用的最多的就是默认部署根目录方式二和子目录方式四+ 这两种。

这里，关于图片资源的引用问题补充说明：

我们都知道，放置是src/assets目录下的图片，使用相对路径引入，通过webpack打包后的图片，一般路径不会出错。

出错的地方是，我们引入了public目录下的图片，这种图片，是不经过打包的，直接被拷贝到dist目录去了，必须使用绝对路径引入，部署在根目录下，是没有问题的，但是，部署在子目录下，这种图片就有问题，路径很难处理。

export default { data() { return { publicPath: process.env.BASE_URL } } }

在template中，我们可以使用process.env.BASE_URL这种拼接方式实现路径正确。

在css中，如果我们引入public目录的背景图，部署在子目录下，这种图片路径，就gg了。所有，css中图片引入，最好是src目录下的，经过webpack打包，就可以了。

【本文地址】

今日新闻