携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第16天，点击查看活动详情

问题描述

项目要求做一个资料库，支持用户上传 PDF 文件，并且以列表形式展示这些上传好的 PDF 文件，当点击这些 PDF 文件时，可在浏览器中查看文件内容。根据需求可以知道要实现该功能不难，但是有一个小问题需要记录一下：就是当在开发环境下点击 PDF 文件时，可以查看文件内容，当项目打包发布在生产环境下时，就找不到文件了。

问题分析

其实这也不难看出，发生这种情况的原因是文件访问路径发生错误，因为开发环境和生成环境的 IP 地址是不一样的，而我代码里面将跳转连接的路径写死成了开发环境的 IP，所以开发环境能访问，生成环境找不到。那么如何动态配置文件访问路径呢，这就需要先在项目中配置不同的环境变量，具体如下。

配置环境变量

作用：通过配置不同的环境变量来避免切换不同环境时手动修改项目配置，比如请求 url 等。
用法：当使用不同命令后，通过 process.env.NODE_ENV 判断当前处于什么环境，然后再获取对应环境的配置。（process.env 可直接使用，无需引入）
配置：我的项目是用 vue-element-template 来搭建的，所以只需要更改 package.json、.env.development、.env.production 和 vue.config.js 这三个文件的配置即可。

package.json

"scripts": {
    "dev": "vue-cli-service serve",
    "build:prod": "vue-cli-service build",
    "build:dev": "vue-cli-service build --mode development",
    "build:stage": "vue-cli-service build --mode staging",
    "preview": "node build/index.js --preview",
    "svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml",
    "lint": "eslint --ext .js,.vue src",
    "test:unit": "jest --clearCache && vue-cli-service test:unit",
    "test:ci": "npm run lint && npm run test:unit"
},

.env.development

# just a flag
ENV = 'development'

# base api
VUE_APP_BASE_API = '/dev-api'

# base url
VUE_APP_BASE_URL = 'http://****:9001'

.env.production

# just a flag
ENV = 'production'

# base api
VUE_APP_BASE_API = ''

# base url
VUE_APP_BASE_URL = 'http://****:9000'

vue.config.js

devServer: {
    port: port,
    open: true,
    overlay: {
      warnings: false,
      errors: true
    },
    proxy: {
      [process.env.VUE_APP_BASE_API]: {
        target: process.env.VUE_APP_BASE_URL,// 动态配置请求 url
        changeOrigin: true,
        pathRewrite: {
          ['^' + process.env.VUE_APP_BASE_API]: '' // 思路是如果是开发环境，就给所有要代理的接口统一加上前缀，然后代理请求时再统一通过rewrite去掉
       }
     }
   }
}

页面代码

<template>
  <div class="app-container">
      <a :href="base_url + '/reference/load/新用户请仔细阅读.pdf'" target="_blank">新用户请仔细阅读.pdf</a>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 项目ip地址：不同环境不同ip
      base_url: ''
    }
  },

  // 页面渲染成功后获取数据
  created() {
    this.base_url = process.env.VUE_APP_BASE_URL
  },
}
</script>

vue-element-template开发环境与生产环境配置