ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

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

2021-05-22 10:59:40  阅读:291  来源: 互联网

标签:vue hash less publicPath 白屏 true 打包 页面


今天打包项目完之后,打开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:'./',
    // 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
})

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

标签:vue,hash,less,publicPath,白屏,true,打包,页面
来源: https://blog.csdn.net/weixin_44637104/article/details/117151981

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有