网络包运行构建静态资源无法找到的vue坑填充解决方案

vue cli搭建的项目在本地测试调试中还可以，运行npm run dev后运行正常。今天，它被放在服务器上运行。结果RD说找不到打包的静态资源，浏览器控制台错误代码为404

我问过RD，因为服务器在线模式的调整，具体的项目路径就不指定了。所以找不到文件https://big data . yiche.com/static/CSS/app . 149 f 36018149 fcbe 537 f 02 caf DC 6 f 047 . CSS。看看我们通常打包的目录：

正确的访问路径是：https://big data . yiche.com/deploy/static/CSS/app . 149 f 36018149 CBE 537 f 02 caf DC 6 f 047

Config/index.js的配置如下：

真的不清楚为什么打包好的文件直接扔进nginx后还能用。所以我找了我们漂亮的姐姐帮忙，几分钟之内就修改了config/index.js下的几行代码，如图：

需要注意的是assetpublicath : '/deploy/'末尾的斜杠，否则会出现部分js打包后出现https://big data . yiche.com/deploystatic/CSS/app . 149 f 36018149 CBE 537 f 02 caf DC 6 f 047的情况。

查看打包的目录，经过比较，您会发现有一个额外的部署目录层，这个额外的路径是由index和assetsRoot这两个设置决定的

AssetsPublicPath是确定打包文件的引用路径；看看打包的index.html文件的js和css资源的引用路径；

比较之前默认配置的路径：

然后放到服务器上，问题就解决了。

问题总结：

原因是服务器没有指定项目目录，所以打包时需要将访问的项目名称添加到打包文件中，所以在配置打包路径时应该添加项目名称。以下是vue cli默认WebPackConfig/index.js的配置说明。

Var path=require ('path ')模块。exports={ build : }//生产环境env3360 require('。/prod。env ')，//使用编译环境index : path . resolve(_ _ dirname，'./dist/index.html)中定义，//编译输入的index.html文件assets root : path . resolve(_ _ dirname，'./dist ')，//编译输出静态资源路径assetsSubDirectory: ' static '，//assetpublipath : '/'，//'，编译输出的二级目录，//编译发布的根目录，可以配置为资源服务器域名或CDN域名productionSourceMap: true。//是否打开cssourcemap//gzip默认关闭尽可能多的热门静态主机因此//surf或者netlift已经为你gzip了所有的静态资产。//在设置为‘true’之前，请确保设置为：//NPM install-save-dev compression-web pack-plugin production gzip : false，//是否打开gzip production gzip extensions :[' js '，' CSS ']//文件扩展名}，dev 3360 {//dev environment env 3360 require('。/dev.env ')，//使用config/dev.env.js中定义的编译环境端口： 8080，//运行测试页的端口assets子目录3360' static '，//编译输出的二级目录assets publicatpath : '/，/，//编译发布的根目录，可以配置为资源服务器域名或CDN域名proxytable://需要proxyTable proxy(跨域)的接口//根据CSS-Loader README/(https://github.com/webpack/css-loader#sourcemaps)的说法，由于相对路径有这个选项的‘bug’//所以默认情况下CSS源码映射关闭//根据我们的经验，它们一般都是按预期工作的，//只是在启用这个选项的时候要注意这个问题。cssourcemap : false//是否打开cssSourceMap } }我个人理解，不欢迎就指出来！

以上vue坑填充的webpack run build静态资源中找不到的解决方案，都是边肖分享给大家的内容。希望能给大家一个参考，多支持我们。