vue cli3 进行 build 后 查看白屏

执行 下面的命令,执行打包

yarn build / npm run build

生成一个dist 文件夹,查看dist下的index.html 后页面白屏,产生问题的原因是:文件路径没有匹配到。
下面是解决办法:

第一滴血 First Blood
项目根目录下新建:vue.config.js

/* eslint-disable prettier/prettier */
// vue.config.js
module.exports = {
    publicPath: "./"   // 相对路径
};
// .env.development
// VUE_APP_BASE_API=/api

Double Kill
打开 src 下的 router 文件夹下的 index.js 文件

import Vue from "vue";
import VueRouter from "vue-router";
import Home from "../views/Home.vue";

Vue.use(VueRouter);

const routes = [
  {
    path: "/",
    name: "Home",
    component: Home
  },
  {
    path: "/about",
    name: "About",
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/About.vue")
  }
];

const router = new VueRouter({
  //mode: "history", // 这个注释掉,不用它  看这里
  base: process.env.BASE_URL,
  routes
});

export default router;

Trible Kill
运行dist 文件下的index.html 文件后,页面就如同 yarn serve 一样正常。

你可能感兴趣的:(vue cli3 进行 build 后 查看白屏)