问题一

打开dist文件中的index.html页面却是一片空白，打开控制台发现报错：Failed to load resource: net::ERR_FILE_NOT_FOUND

vue-cli2处理方式

vue-cli3处理方式

or

在 vue.config.js 文件

module.exports = {
    publicPath: './',         //配置本地引用目录文件,如不配置，默认为`/`
}

问题二

如果页面还是没有显示出来，并且提示找不到文件，文件可能被删除，仔细看路径也变了，这个时候问题原因就是路由模式出现问题了。

把history模式改成hash模式的方法

vue2：

const router = new VueRouter({
  mode:"hash",
  routes
})

vue3：

const router = createRouter({
  history: createWebHashHistory(process.env.BASE_URL),
  routes
})

路由模式也修改之后重新npm run build打包，查看dist中的index.html文件，就可以正常打开了。

打开时 使用插件 Live Server打开dist项目

vite项目打包后,接口调用失败(vite+vue2.7)

vue项目打包之后,双击dist文件中index.html时,接口调用失败,是因为在生产环境下（即打包后），服务器代理设置不再有效。 若想在打开index.html后依旧可以像在开发环境一样调用接口(即file协议直接打开html后，调接口)可进行如下配置

首先需要让页面可以正常加载出来,如上文描述

在vite.config.ts 或者 vite.config.js 中配置   base: './'

页面能出来之后就是配置接口

情况一

通过script标签，window对象上挂载接口根路径，打包后想修改接口根路径在index.html中修改保存就行。 在index.html中

在自己封装的接口文件中

适用于项目只代理一个服务器,若代理多个服务器可能需要更复杂点的操作