vue3.0以上关于打包后出现空白页和路由不起作用

时间:2019-08-23
本文章向大家介绍vue3.0以上关于打包后出现空白页和路由不起作用,主要包括vue3.0以上关于打包后出现空白页和路由不起作用使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

1.解决页面空白,找不到资源

在项目根目录中的vue.config.js中publicPath: '/'修改为publicPath: './',如果没有这个文件,新建一个,基础代码为:

module.exports = {
  publicPath: './',
    outputDir: 'dist',
    lintOnSave: true,
    runtimeCompiler: true, //关键点在这  
    // 调整内部的 webpack 配置。
    // 查阅 https://github.com/vuejs/vue-doc-zh-cn/vue-cli/webpack.md
    chainWebpack: () => {},
    configureWebpack: () => {},
    // 配置 webpack-dev-server 行为。
    devServer: {
      open: process.platform === 'darwin',
      host: '0.0.0.0',
      port: 8080,
      https: false,
      hotOnly: false,
      // 查阅 https://github.com/vuejs/vue-doc-zh-cn/vue-cli/cli-service.md#配置代理
      proxy: null, // string | Object
      before: app => {}
    }
  }

2.解决路由不起作用:

将路由中的红框里面的注释掉,或者将history模式更改为vue项目默认的hash模式即可

原文地址:https://www.cnblogs.com/WangXinPeng/p/11398588.html