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模式即可