解决Vue-cli npm run build生产环境打包,本地不能打开的问题

为了解决Vue-cli npm run build生产环境打包后本地无法访问的问题，我们需要进行以下操作。

1. 确认文件路径与路由设置

首先需要确认打包后的文件是否被正确地放置在了服务器的根目录下。同时需要注意，如果 Vue 路由使用了 history 模式，需要正确设置后端服务器来支持 history 模式的访问。否则在有些情况下会导致无法正确访问应用。

以 nginx 服务器为例，可以使用如下配置使其支持 Vue 路由的 history 模式：

server {
  listen 80;
  server_name example.com;
  root /var/www/example.com;
  # 其他配置
  location / {
    try_files $uri $uri/ /index.html;
  }
}

这里的 example.com 是该服务器的域名，/var/www/example.com 是该服务器的根目录。location / 配置了对根路径 / 的访问，其中 try_files 尝试获取静态文件，如果不存在则返回 /index.html 页面，从而实现 history 模式的支持。

2. 确认环境变量与基础路径

在 Vue-cli 的配置中，可以通过设置 publicPath 来设置打包后的应用在服务器上的基础路径。如果应用被部署在子路径下，需要相应地设置 publicPath。同时需要注意，如果使用了一些基于环境变量的插件，如 webpack.DefinePlugin，需要确认其是否正确地设置了基础路径。

假设我们的应用被部署在了 /example 路径下，可以在 config/prod.env.js 文件中设置如下环境变量：

module.exports = {
  NODE_ENV: '"production"',
  BASE_URL: '"/example/"'
}

然后在 config/index.js 文件中设置如下选项：

module.exports = {
  // ...
  build: {
    // ...
    assetsPublicPath: '/example/'
  }
}

这样，在打包后的应用中所有资源路径都会添加上 /example/ 前缀，从而正确地访问到应用资源。

示例说明

示例 1：修正 Vue 路由在 history 模式下的访问

假设我们的 Vue 应用启用了 history 模式的路由，但在打包后的应用中访问任何路由都无法正常显示。此时我们可以按照上文所述，在 nginx 配置中添加对应设置：

server {
  listen 80;
  server_name example.com;
  root /var/www/example.com;
  # 其他配置
  location / {
    try_files $uri $uri/ /index.html;
  }
}

这样就可以正确访问 Vue 应用中的所有路由了。

示例 2：设置正确的基础路径

假设我们的 Vue 应用是在根目录下部署的，但打包后的应用却无法正确地加载静态资源。此时我们可以按照上文所述，在环境变量和打包配置中设置正确的基础路径：

在 config/prod.env.js 文件中设置：

module.exports = {
  NODE_ENV: '"production"',
  BASE_URL: '"/"'
}

在 config/index.js 文件中设置：

module.exports = {
  // ...
  build: {
    // ...
    assetsPublicPath: '/'
  }
}

这样就可以正确加载根目录下所有的静态资源。