webpack打包vue项目,生成的css和JavaScript由绝对路径改为相对路径
场景:使用nginx做了反向代理,所有的静态资源访问都需要加个前缀。例如:http://xxxx:8080/login,需要加前缀web/改为:http://xxxx:8080/web/login,则需要修改配置文件,把css和JavaScript的引用目录改为相对路径。未改之前打包后的index.html文件引用css和JavaScript,都是绝对路径,如图:修改配置文件只需...
·
场景:使用nginx做了反向代理,所有的静态资源访问都需要加个前缀。例如:http://xxxx:8080/login,需要加前缀web/改为:http://xxxx:8080/web/login,则需要修改配置文件,把css和JavaScript的引用目录改为相对路径。
未改之前打包后的index.html文件引用css和JavaScript,都是绝对路径,如图:
修改配置文件只需修改两个文件即可。
一、修改项目下config的index.js文件:
将build下的assetsPublicPath:'/'改为assetsPublicPath:'./',如下图:
二、修改项目下build文件夹下的utils.js文件,webpack4和之前版本的改法不一样,下面两种都罗列出来:
(1)webpack4之前的版本,在ExtractTextPlugin插件配置的地方下加上publicPath:'../../',如图:
(2)在webpack4版本中,在options下加上publicPath:'../../',如图:
最后打包验证结果,引用为相对路径,如图:
更多推荐
已为社区贡献2条内容
所有评论(0)