vue-cli项目打包出现空白页和路径错误问题

vue-cli4

1. 首先要有 vue.config.js 配置文件，我这是简单的一些配置

const path = require('path')
const resolve = dir => path.join(__dirname, dir)

module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? './' : './',
  outputDir:'dist',
  chainWebpack: (config) => {
    config.resolve.alias
        .set('@',resolve('./src'))
        .set('img', resolve('./src/assets/images'))
        .set('assets', resolve('./src/assets'))
  }
}

2.命令行输入：npm  run  build  打包，生成dist

1）路径引起的问题，我们直接运行打包后的文件夹中的index.html文件，会看到网页一片空白，f12调试，全是css，js路径引用错误的问题

解决：把vue.config.js中的 publicPath:'/' 改成 publicPath:'./'

‘/’指的是项目的根目录 ，’./’指的是当前目录。

2)router-view中的内容显示不出来。路由history模式。

这个坑是当你使用了路由之后，在没有后端配合的情况下就手贱打开路由history模式的时候，打包出来的文件也会是一片空白的情况

const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,
  routes
});

export default router;

解决：

const router = new VueRouter({
  // mode: "history",
  base: process.env.BASE_URL,
  routes
});

export default router;