【已解决】使用vue打包后查看打包好的出现白屏——vue2.x打包之后出现白屏_vue2打包白屏

今天打包项目完之后，打开index.html去看看有没有什么发题，一打开奇怪的事发生了，居然是空白
如图

打开控制台之后，如图

百度了半天发现是文件引入的路径出问题了，于是我将打包之后的index.html中的各种引入的都修改了路径，错误是没有了，但是页面还是空白，然后还是各种查找~~~~
最后皇天不负有心人，终于解决了，下面就是解决的办法，希望能给各位带来帮助，

在项目根目录下新建文件vue.config.js（与src在同一目录），并配置如下：

module.exports = {
    // 修改的配置
    // 将baseUrl: '/api',改为baseUrl: '/',
   // baseUrl: '/',3.0 被弃用改为 publicPath
    outputDir: 'dist',
    /* assetsPublicPath: process.env.NODE_ENV === 'production' ? '/vant-demo/' : '/',*/
    // publicPath:'./',
    assetsDir: 'assets',
    publicPath:'./',
    devServer: {
        /* open: true,
           host: "localhost", //本地真机测试
         // host: "localhost",
         port: 8888,*/
        // proxy: {
        //     '/api': {
        //         target: 'http://wjdr.51xpx.com/',
        //         changeOrigin: true,
        //         pathRewrite: {
        //             '^/api': ''
        //         }
        //     },
        //     '/baofoo': {
        //         target: 'https://bht.mandao.com',
        //         changeOrigin: true,
        //         pathRewrite: {
        //             '^/baofoo': ''
        //         }
        //     }
        // },
        stats: {
            children: false,
        },
    },
    css: {
        loaderOptions: {
            // 给 less-loader 传递选项,开启less的javascript选项
            less: {
                javascriptEnabled: true
            }
        }
    }
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

原文在这里[https://blog.csdn.net/qq_38969618/article/details/104156205?ops_request_misc=&request_id=&biz_id=102&utm_term=vue2.x%E6%89%93%E5%8C%85%E4%B9%8B%E5%90%8E%E7%A9%BA%E7%99%BD&utm_medium=distribute.pc_search_result.none-task-blog-2_allsobaiduweb~default-9-.pc_search_result_before_js&spm=1018.2226.3001.4187] 感兴趣的可以去看一看，

配置好之后，再进行打包命令，命令这里相信大家都会。

-----------------------------
最后再说几个点，如果你打包的是pc端的项目，并且用的是elementUI框架的话，其中代码中要跳转页面使用的是<el-link></el-linke>标签的话，修改成<router-link></router-link>不要忘了将 href 改为 to，
还有一个是，如果你的mode是history的话，改成hash
来看看他们的区别：

• hash模式url带#，histroy模式url不带#
• hash模式解决了通过http请求来切换页面，改变路径可以直接改变页面，无需进行网络请求，这叫前端路由，在hash模式下改变的是#中的信息
• history模式，可以前进和后退，但是不能刷新页面，刷新之后就会报错。如果后端没有对路由地址进行相应的处理，那么就会报404的错。
• hash浏览器支持率比较好，支持低版本的浏览器，但history的方法只支持部分浏览器。

const router = new VueRouter({
  mode: 'hash',
  base: process.env.BASE_URL,
  routes
})
1
2
3
4
5

至此，本次的分享到此结束，如果大佬们还有更好的建议，希望不吝赐教。