vue2生产环境和开发环境配置

vue2生产环境和开发环境配置

在项目跟目录新建 两个文件夹  
生产环境文件夹  .env.production   ，开发环境文件夹  .env.development

在 .env.production中写

NODE_ENV = 'production'
VUE_APP_MODE = 'production'
VUE_APP_API_URL = 'http://127.0.0.1/api'       //这里写项目上线后的接口地址

在 .env.development 中写

NODE_ENV = 'development'
VUE_APP_MODE = 'development'
#VUE_APP_API_URL = 'http://localhost:3000'    //这里如果是在vue.config.js中配置了跨域地址那这里就不能写这个， 要写跨域地址匹配的  比如跨域地址中匹配 ‘/api’ ,那就写下面那个变量
VUE_APP_API_URL='/api'

自定义封装 axios 请求

import axios from "axios";
const _axios = axios.create({
    baseURL:process.env.VUE_APP_API_URL    //这个就是请求基地址，根据项目环境变化而改变
})
export default _axios

最后 在 vue.config.js中配置跨域地址

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    proxy: {
      '/api': {
        //用来存放想请求的地址
        target: "http://localhost:3000",
        //允许跨域
        changOrigin: true,
        pathRewrite: {
          // 替换 发送请求的时候 是/api 开头 就把/api换成''空
          '^/api': '',
        }
      }
    }
  },
  // 路径替换成相对路径,这个publicPath如果项目不是部署在服务器根目录，那就需要写上目录的路径名称
  // publicPath: './',
  // 不生成js的SourceMap 映射文件 减小打包体积
  productionSourceMap: false,
  assetsDir:'stati'   //css等静态资源统一存放的文件夹，也是在dist目录下
})

配置好以后 ， 最后运行 yarn run build 打包成功后 丢给运营 就可以了