vue-cli构建项目npm run build打包后怎么在本地查看效果

最新推荐文章于 2025-05-19 21:30:27 发布

转载最新推荐文章于 2025-05-19 21:30:27 发布 · 1.6k 阅读

Vue.js 专栏收录该内容

21 篇文章

订阅专栏

本文介绍了解决Vue项目打包后出现404错误和图片引用路径问题的方法，通过修改配置文件中的路径设置，确保资源正确加载。

这时如果直接运行npn run build是可以运行并打包你的代码的，不会报任何异常或错误，但是会看到打包完成有这样一句提示：

打开了控制台，看到console tab下一片404的各种找不到资源

解决方案

打开项目文件夹。找到config文件夹里的index.js文件中的build对象，将assetsPublicPath中的“/”，改为“./”，并在build\build.js将这两句的提示信息删掉或注释掉，再打包直接用浏览器直接运行就好了。

vue-cli 打包之后图片引用路径问题

先来看下报错：

首先看下我项目的dist目录：

按理说，这个img的路径应该是https://xxxxxxxxxxxxxx/dist/static/img/xxx.xxxxxx.png,但是很明显路径就成了https://xxxxxxxxxxxxxx/static/css/static/img/xxx.xxxxxx.png，首先应该可以确定是打包的时候出现了什么问题。

其实很简单。打开/build/utils.js文件，找到这段代码：

// Extract CSS when that option is specified
// (which is the case during production build)
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader'
})
} else {
return ['vue-style-loader'].concat(loaders)
}
}
1
2
3
4
5
6
7
8
9
10
11
加上红框内容：publicPath: '../../',当然这个路径是根据自己项目的实际情况来的

再次npm run build就可以看效果啦。
---------------------
作者：AmberWu
来源：优快云
原文：https://blog.youkuaiyun.com/AmberWu/article/details/80169271
版权声明：本文为博主原创文章，转载请附上博文链接！