vue-cli3打包上线时遇到的坑（打包后页面空白、接口404、进入二级页面刷新404）

前言:

    刚开始以为打包上线挺简单的，不就是 cnpm run build 打包然后把代码往服务器一扔吗。但是打包后发现遇到了各种问题，首先就是页面空白的问题，页面空白有两个原因，第一个是因为路径找不到造成的页面空白，第二个是渲染问题。其次就是后台接口404错误。在这里，我会建一个新的vue3项目，来重新走一遍打包时遇到的坑。

vue-cli3打包上线后页面空白

vue-cli3打包上线后调用后台接口404错误

 

首先，创建一个新项目，创建项目过程太过简单，毕竟是基础，就不写在这里了，我创建一个新项目名为 test01,创建成功后的项目如下：

                                                                               

接下来打开终端，输入 cnpm run serve 运行这个项目查看效果：

现在来进入正题：项目打包。

首先，在终端输入 cnpm run build 进行项目打包，等待片刻后提示如下：

打包成功后，会在项目文件夹下创建一个新的文件夹：dist 

在这个文件夹下就是test01这个项目打包后的内容了，内容如下：

                                                

接下来我们双击index.html看一下效果：

现在，我们发现打开后页面是一片空白，打开F12查看控制台

可以发现，报错找不到文件，后面的路径显示的是/F:/css/与/F:/js/。看到这里应该明白原因了，这是路径错误，我们想要的路径是从打包后的项目根目录查找，也就是从dist文件夹下查找，但是这里却是从/F:查找，也就是说是从绝对路径查找，并非相对路径，这个问题解决方法就是，回到test01项目，在test01项目下新建一个vue.config.js文件，默认是不存在这个文件的。创建成功后，在vue.config.js中输入：