1、出现空白页

1.1 打包路径：
module.exports = {publicPath:'./',    //修改为绝对路径
}

         修改完打包路径后build可以展示页面

        1.2 路由模式：
                项目上线要求是history模式，需要后端做重定向
                前端自测可以使用hash模式 

2、代理和环境变量

问题：打包前可以获取数据，build后打开就报错了

 vue-cli中文官网Vue CLI

解决：

        2.1 在根目录新建文件.env.production

VUE_APP_TITLE = 'cwc'VUE_APP_ENV = 'pro'VUE_APP_BASE_API = 'http://localhost:3000/'

        2.2 新建文件.env.development

VUE_APP_TITLE = 'cwc'VUE_APP_ENV = 'dev'VUE_APP_BASE_API = 'http://localhost:3000/'

         2.3 封装下axios  src/api/http.js

import axios from "axios";export default {$axios(option) {let apiUrl = null;if (process.env.VUE_APP_ENV === 'dev') {apiUrl = option.url} else {apiUrl = process.env.VUE_APP_BASE_API + option.url}console.log(apiUrl, 'apiUrl');return axios({url: apiUrl})}
}

        2.4 组件中调用接口

<script>
import http from "../api/http";
export default {name: 'HelloWorld',props: {msg: String},created() {http.$axios({url: 'list'}).then(res => {console.log(res)})}
}
</script>

        2.5 vue.config.js 中已做的配置(保证配置后能正常获取接口数据，且build后不会出现空白页)

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({publicPath:'./',transpileDependencies: true,devServer: {proxy: 'http://localhost:3000'},
})

        2.6 如果做了以上配置build后还是无法获取数据，可尝试在后端配置以下代码

router.all('*', function (req, res, next) {res.header('Access-Control-Allow-Origin', '*');res.header('Access-Control-Allow-Headers', 'Content-Type');res.header('Access-Control-Allow-Methods', '*');res.header('Content-Type', 'application/json;charset=utf-8');next();
})