zoukankan      html  css  js  c++  java
  • Vue.js踩坑记录:vue-cli 3.0 项目打包后页面空白

    新建一个项目,使用vue-cli 3.0进行构建,使用了vux和vue-router,本地运行时是没有问题的,但是在打包之后,页面就一片空白,打开控制台会看到是各种资源引用出错。

    这是因为webpack的配置不对,只需要将webpack的配置修改一下就好。

    vue-cli 3.0 内置了webpack,并且将vue的配置文件作为了一个可选的配置(创建时没有),如果需要修改vue和webpack的配置,则需要自己建一个配置文件  vue.config.js  放在项目的根目录下。

    然后设置一个baseUrl:

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

    这样在打包的时候,就能加载到静态资源了。

    然后这个时候还没完,修改完之后,页面变成了这个样子:

     页面上只剩一个在App.vue里面的两个跳转按钮,并且跳转按钮跳转后也是不对的。

     这个是因为在router里面的mode配置,默认设置为 history ,只要将这个mode注释掉再打包,就能正常显示了。

    当然也可以使用history模式的路由,只是项目需要在服务器环境下运行。

    比如使用node的serve,这个在vue-cli的文档中有说:https://cli.vuejs.org/zh/guide/deployment.html

    我是直接使用了phpstudy的环境运行浏览。

  • 相关阅读:
    Problem 3
    Problem 2
    Problem 1
    Python基础 装饰器
    算法——狄克斯特拉算法
    A Knight's Journey POJ 2488
    多校10 1007 CRB and Queries
    多校9 1007 Travelling Salesman Problem
    多校8 1008 Clock
    多校7 1005 The shortest problem
  • 原文地址:https://www.cnblogs.com/Naiky/p/11578157.html
Copyright © 2011-2022 走看看