vue 项目打包通过命令修改 vue-router 模式 修改 API 接口前缀

在讲解“vue 项目打包通过命令修改 vue-router 模式修改 API 接口前缀”之前，我们需要了解一下几个基本概念。

1. vue-router：是 Vue.js 官方提供的路由管理插件。
2. API 接口前缀：是指 API 接口的 URL 前面的部分，通常包含域名、端口号等信息。

下面是详细的攻略：

1. 修改 vue-router 模式：

Vue Router 可以有三种不同的模式：hash（默认值）、history 和 abstract。在打包时修改 vue-router 模式，首先需要通过命令行工具安装 cross-env且通过 cross-env 设置环境变量。cross-env 用于跨平台设置环境变量，可用于 Windows、Linux 和 macOS。

具体操作流程如下：

安装 cross-env：

npm install cross-env --save-dev

修改环境变量：

"scripts": {
    "dev": "cross-env NODE_ENV=development vue-cli-service serve",
    "build": "cross-env NODE_ENV=production vue-cli-service build"
  }

在环境变量中添加一个新的变量：

"scripts": {
    "dev": "cross-env NODE_ENV=development VUE_APP_ROUTER_MODE=hash vue-cli-service serve",
    "build": "cross-env NODE_ENV=production VUE_APP_ROUTER_MODE=history vue-cli-service build"
  }

1. 修改 API 接口前缀

在开发过程中，API 接口 URL 可能会发生变化，所以在打包时需要通过命令修改 API 接口前缀。这里介绍两种常用的方式：

• 方式一：通过 .env 文件配置

在根目录下创建一个 .env 文件，然后设置 API 接口的前缀，例如：

VUE_APP_BASE_API=http://localhost:8080/api

在 vue.config.js 文件中，使用 process.env.VUE_APP_BASE_API 来引用 API 接口前缀，例如：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: process.env.VUE_APP_BASE_API,
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

• 方式二：通过 cross-env 命令行参数配置

在命令行中指定 API 接口的前缀，例如：

cross-env VUE_APP_BASE_API=http://localhost:8080/api vue-cli-service build

在 vue.config.js 文件中，使用 process.env.VUE_APP_BASE_API 来引用 API 接口前缀，例如：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: process.env.VUE_APP_BASE_API,
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

以上就是“vue 项目打包通过命令修改 vue-router 模式修改 API 接口前缀”攻略的详细说明，希望对你有帮助。