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

今天打包项目完之后,打开index.html去看看有没有什么发题,一打开奇怪的事发生了,居然是空白
如图
【已解决】使用vue打包后查看打包好的出现白屏——vue2.x打包之后出现白屏
打开控制台之后,如图
【已解决】使用vue打包后查看打包好的出现白屏——vue2.x打包之后出现白屏
百度了半天发现是文件引入的路径出问题了,于是我将打包之后的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:'./',
    // assetsPublicPath:"/",
    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
            }
        }
    }
};

原文在这里[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-2allsobaiduweb~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
})

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

上一篇:Java特性、优势及版本


下一篇:win-jdk安装教程