详解vue静态资源打包中的坑与解决方案-创新互联

本文主要解决

①.vue-cli默认配置打包后部署至特定路径下静态资源路径错误问题;

②.静态资源打包使用相对路径后css文件引入大图片路径错误问题。

1、问题

vue-cli 脚手架生成的默认打包配置文件情况下运行 npm run build 打包后，部署项目至特定路径下：如：

//ip:port/public/springActivity/

此时访问：

http://ip:port/public/springActivity/index.html

index.html 可以正常访问，但是引用的js，css等文件服务器响应均为404，查看引入的资源路径如下：

http://ip:port/static/css/app.cea07642cd24c0d7a5c4b9b7afc7ff64.css
http://ip:port/static/js/app.815851e87b083afb82bf.js

2、分析

由上可以看出是资源打包路径有误，打包后的资源使用了绝对根目录路径，因此将项目部署到特定目录下，其引入的资源路径无法被正确解析。

3、解决

在打包时需要使用相对路径来处理静态资源，更改build中资源发布路径配置（config/index.js, build对象）：

将 assetsPublicPath: '/'  改为  assetsPublicPath: './',
再次打包，并将资源部署到特定路径下，然后访问：

此时index.html可以正常访问，同时js和css资源也可以正常访问，但是css中引入的assets目录下的大图片资源出错了（服务端404）

4. 再分析

查看引入的图片资源路径如下：

http://ip:port/public/springActivity/static/css/static/img/question_bg.61a2825.png

实际项目中资源路径如下：

index.html
static/
 |--js/
  |--*.js
 |--css/
  |--*.css
 |--img/
  |--*.png

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。