vue vue.config.js devServer和.env(.env.development,.env.production) 文件配置

vue 目前是三大框架最简单的一种,结合了angular和react的优点,vue最大的缺点就是数据迭代会导致一些列问题所以做大项目的话,有事和react和angular要差一点,我15年接触vue之前一直是angular和react。闲话不都说给大家讲解一下小知识。



1,vue.config.js devServer 

//服务配置
   devServer: {

        open: false, //配置运行项目是否自动开启浏览器

        host: "0.0.0.0", //0.0.0.0我配置的是真机测试根据个人需要可以配置成localhost

        port: 8080, //端口号

        https: false, //配置true的话是https安全通道但是如果没有后注册SSL会有警告

        //配置跨域

        process.env开头的话一般都是    .env文件里面的变量注意变量必须VUE_APP_开头后面谢你的变量名比如VUE_APP_NAME
    .env  .env.development  .env.production  这三种后缀的文件第一种是如果没有后两个测直接获取第三个的文件内容,后两个一个是测试环境下获取.env.development 如果打包之后获取.env.production
        proxy: {

            [process.env.VUE_APP_BASE_API]: {

                target: process.env.VUE_APP_URL,

                ws: true, //配置ws跨域

                changOrigin: true, //配置跨域

                pathRewrite: {

                    ['^'+process.env.VUE_APP_BASE_API]: process.env.VUE_APP_BASE_API

                }

            }

        },

//请求本地资源类似node的express

before(app) {

  app.get('/api/seller', (req, res) => {

    res.json({

      errno: 0,

      data: seller

    })//接口返回json数据,上面配置的数据seller就赋值给data请求后调用

  }),

  app.get('/api/goods', (req, res) => {

    res.json({

      errno: 0,

      data: goods

    })

  }),

  app.get('/api/ratings', (req, res) => {

    res.json({

      errno: 0,

      data: ratings

    })

  })

}




    }

你可能感兴趣的:(vue vue.config.js devServer和.env(.env.development,.env.production) 文件配置)