Vue2教程 - 21 多环境配置与发布

在实际的开发中，项目会分为生产和测试环境，针对不同的环境会有不同的配置，例如服务器地址等。

所以需要针对不同的环境使用不同的配置文件，总不能每次都修改，容易出错。

21.1 创建配置文件

vue-cli 3.0相对简单，只需要在项目根目录创建.env文件即可。

1. 创建普通全局变量 .env
2. 创建开发环境变量 .env.development
3. 创建测试环境变量 .env.test
4. 创建生产环境变量 .env.production

在每个文件中，定义不同环境变量的格式是：VUE_APP_变量名=值。例如：

# 在.env.development文件中
VUE_APP_API_URL=http://localhost:8080/api

# 在.env.test文件中
VUE_APP_API_URL=https://test.doubibiji.com/api

# 在.env.production文件中
VUE_APP_API_URL=https://www.doubibiji.com/api

21.2 使用环境变量

在 Vue 组件或 JavaScript 文件中，可以通过 process.env 访问这些变量。例如：

console.log(process.env.VUE_APP_API_URL);

// 创建一个 Axios 实例
const instance = axios.create({
  baseURL: process.env.VUE_APP_API_URL, // 修改为你的API基础URL
  timeout: 10 * 1000  // 请求超时时间
});

process.env.NODE_ENV 为自带的默认变量，会自动设置为上边对应的模式名称，例如 development 、test 、 production 。

注意：只有 NODE_ENV，BASE_URL 和以 VUE_APP_ 开头的变量将通过 webpack.DefinePlugin静态地嵌入到的代码中，被载入的变量将会被 vue-cli 的所有命令、插件、依赖可用。

21.3 修改package.json脚本

在 package.json 文件中，你可以通过 --mode 参数指定构建或启动时使用的环境：

"scripts": {
  "serve": "vue-cli-service serve --mode development",  // 以开发环境运行
  "test": "vue-cli-service serve --mode test",  // 以测试环境运行
  "build:test": "vue-cli-service build --mode test",  // 以测试环境打包
  "build:prod": "vue-cli-service build --mode production"  // 以生产环境打包
}

根据自己的需要配置运行和打包的命令。

21.4 运行命令

根据 package.json 中的配置运行命令（根据上面的命令来的）：

• 以开发环境运行：npm run serve
• 以测试环境运行：npm run test
• 测试环境打包：npm run build:test
• 生产环境打包：npm run build:prod

打包后，会在项目根目录下生成一个 dist 文件夹，就可以发布到 Nginx 服务器下了。

21.5 发布

将打包的 dist 文件夹中的内容放到 Nginx 的站点目录下。或者修改 Nginx 配置，将站点目录设置为 dist 文件夹所在位置。

另外需要配置反向代理，解决前端的跨域问题，将 /api 开头（当然这个是自定义的）的请求转发给后端的服务器。

# nginx 配置文件
server {
    listen       80;
    server_name  localhost;

    location /api/ {		// 将后端的请求转发到后端服务器
       proxy_pass              http://localhost:8090/;
       proxy_set_header        Host $host;
       proxy_set_header        X-Real-IP $remote_addr;
       proxy_set_header        X-Forwarded-For $proxy_add_x_forwarded_for;
       client_max_body_size    40M;
    }

    location / {
        root   /usr/share/nginx/html/dist;  // 设置为dist所在目录
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
    }

    # ...其他配置
}

内容未完......

查看完整内容 →