vue3纯静态页面打包后报跨域问题怎么解决

如果你使用 Vue CLI 打包纯静态页面，打包后的文件应该是可以直接放到服务器上访问的，不会有跨域问题。如果你的打包文件需要放到本地文件系统中访问，那么你可以通过以下两种方式解决跨域问题：

1. 修改打包配置

在 `vue.config.js` 文件中添加以下配置：

module.exports = {
  devServer: {
    contentBase: './dist',
    port: 8080,
    // 允许跨域访问的域名列表
    headers: {
      'Access-Control-Allow-Origin': '*'
    }
  }
}

这样打包后的文件就可以通过 `http://localhost:8080` 访问，并且允许跨域访问了。

2. 使用本地服务器

你可以使用 Node.js 搭建一个本地服务器，将打包后的文件放到服务器上访问，这样就不会有跨域问题了。可以使用 `http-server` 这个 npm 包来搭建本地服务器：

首先安装 `http-server`：

npm install -g http-server

然后在打包后的文件夹中运行以下命令启动服务器：

http-server

这样就可以通过 `http://127.0.0.1:8080` 或其他指定的地址来访问打包后的文件了。

相关问题

vue打包后出现跨域问题

在 Vue 打包后出现跨域问题，可能是因为打包后的静态文件是通过文件系统协议（file://）来访问的，而不是通过 HTTP 协议来访问的。

如果你的打包文件是通过 HTTP 协议来访问的，那么跨域问题就会被解决。你可以将打包后的文件部署到一个 HTTP 服务器上，例如 Nginx 或 Apache，然后通过 HTTP 协议来访问。

如果你无法将打包文件部署到 HTTP 服务器上，也可以使用 `webpack-dev-server` 提供的 `--public` 参数来指定公共路径。在使用 `vue-cli-service build` 命令打包时，可以加上 `--public /your/public/path/` 参数来指定公共路径。

例如，如果你的打包文件放在 `/myapp` 目录下，可以使用以下命令来打包：

vue-cli-service build --public /myapp/

这将会在打包后的文件中加入 `publicPath` 配置项，将静态资源的路径改为 `/myapp/` 开头的路径。这样，在访问静态资源时就会自动加上 `/myapp/` 前缀，避免了跨域问题。

vue3打包时出现跨域问题

Vue3 打包时出现跨域问题，可能是因为 Vue3 在打包时会将静态资源（如图片、字体等）转换为 base64 编码，导致跨域问题。解决方法有以下几种：

1. 在 vue.config.js 中配置 publicPath，将其设置为绝对路径，如下：

module.exports = {
  publicPath: 'http://www.example.com/static/'
}

2. 在服务器端配置 CORS（跨域资源共享）规则，允许跨域访问静态资源。

3. 将静态资源放在与主域名相同的域名下，如使用 CDN 加速。

希望以上方法能够帮助你解决问题。如果还有疑问，请随时问我。