美文网首页
vue-element-template 开发环境、测试环境、运

vue-element-template 开发环境、测试环境、运

作者: Do_Du | 来源:发表于2019-11-07 16:30 被阅读0次

    1、文件\.env.development中配置的域名是开发运行环境 - 对应命令 npm run dev
    开发过程中执行npm run dev即可访问到

    在文件\.env.development中配置:VUE_APP_BASE_API = 'https://aa-test.com'
    在页面中访问:console.log(process.env.VUE_APP_BASE_API)
    执行命令:npm run dev 即可访问上面配置的域名:https://aa-test.com

    2、文件\.env.production中配置的域名是正式环境(可理解为编译环境1) - 对应命令 npm run build:prod
    执行:npm run build:prod当打包编译后即可访问到

    在文件\.env.production中配置:VUE_APP_BASE_API = 'https://aa.com'
    在页面中访问:console.log(process.env.VUE_APP_BASE_API)
    执行命令:npm run build:prod,并把项目放至服务器 即可访问上面配置的域名:https://aa.com

    3、文件\.env.staging中配置的域名是测试环境(可理解为编译环境2) - 对应命令 npm run build:stage
    执行:npm run build:stage当打包编译后即可访问到

    在文件\.env.staging中配置:VUE_APP_BASE_API = 'https://aa-test.com'
    在页面中访问:console.log(process.env.VUE_APP_BASE_API)
    执行命令:npm run build:stage,并把项目放至服务器 即可访问上面配置的域名:https://aa-test.com

    最重要的点在request.js中配置

    const service = axios.create({
      baseURL: process.env.VUE_APP_BASE_API, 
      timeout: 5000000 // request timeout
    })
    

    package.json文件中配置:

    image.png

    vue.config.js文件中配置:

    proxy: {
          '/api': {
            target: process.env.VUE_APP_BASE_API,
            changeOrigin: true,
            ws: true,
            pathRewrite: {
              '^/': ''
            }
          }
        },
    

    相关文章

      网友评论

          本文标题:vue-element-template 开发环境、测试环境、运

          本文链接:https://www.haomeiwen.com/subject/ftdvbctx.html