美文网首页
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