vue-cli 3.0 创建的项目，打包后在服务器无法访问，页面空白，控制台报错

东方雨林_Lin

于 2019-07-13 11:48:18 发布

阅读量1.4w

点赞数 5

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue

本文链接：https://blog.youkuaiyun.com/qq_24811915/article/details/95735952

vue 专栏收录该内容

0 篇文章

订阅专栏

vue-cli 3.0创建的项目，dev下运行正常，打包后在服务器无法访问、页面空白且控制台报错。原因是资源文件引用路径打包后改变。因vue-cli 3.0封装了webpack，需在手动创建的vue.config.js里修改配置，后将‘baseUrl’改为‘publicPath’。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue-cli 3.0 创建的项目，打包后在服务器无法访问，页面空白，控制台报错
dev下运行时正常的，但在打包后就不正常了，如下图

经过各种百度所知，是因为资源文件的引用路径，打包后变了，导致路径不正确，找不到文件。
又经过百度得知 vue-cli3.0把webpack封装了，所以只需要在vue.config.js里修改一下配置就可以了。
又经过百度得知 vue-lic3.0默认不会自动创建vue.config.js文件，所以我们需要手动在目录下创建一个（和package.json,README.md等文件同级）

根据博客所知只需要在vue.config.js里添加以下内容就可以了

module.exports = {
    //...
    baseUrl: './'
    //...
}

再次保存打包后提示：
WARN “baseUrl” option in vue.config.js is deprecated now, please use “publicPath” instead.

然后又把“baseUrl”单词改成了“publicPath”

module.exports = {
    //...
    publicPath: './'
    //...
}```

 再次打包
 浏览发现可以正常在服务器访问了。