美文网首页webpack学习笔记记录Vue专题Vue技术
Vue方向:理解vue.config.js配置文件

Vue方向:理解vue.config.js配置文件

作者: 听书先生 | 来源:发表于2021-04-18 11:37 被阅读0次

    [官方API]https://cli.vuejs.org/zh/config/#
    vue.config.js是一个可选的配置文件,如果项目的根目录中存在这个文件,那么它会被@vue/cli-service自动加载,也可以使用package.json中的vue字段

    1、proxy代理

    Type : string | Object
    前端的应用和后端API服务器没有运行在同一个主机上,需要在开发环境中将API请求代理到API服务器,这个可以通过vue.config.js中的devServer.proxy选项来配置。

    devServer:{
      port:8000, //端口号
      proxy: {
           '/api' : {
                target : 'https://localhost:4000',
                ws : true,//有webscoket请求的时候把这个设置成true
                changeOrigin : true
            },
            //可以反向代理多个
            '/foo' : {
                target : 'https://localhost:5000'
            }
        }
    }
    

    下面进行测试,通过反向代理获取猫眼电影的接口数据信息.
    1. 新建vue.config.js文件,配置相关猫眼相关代理部分

    module.exports = {
        devServer: {
            proxy: {
                '/ajax': {
                    target: 'http://m.maoyan.com',
                    //ws: true,//有webscoket请求的时候把这个设置成true
                    changeOrigin: true
                },
            }
        }
    }
    

    2. 项目中安装axios,通过axios去调取接口获取接口数据

    <div v-for="item in data" :key="item.id">
          <div class="info">
            <span>电影名称: </span>{{ item.nm }} 
            <span>上映时间: </span>{{ item.rt }} 
            <span>电影明星: </span>{{ item.star }}
          </div>
    </div>
    
    import axios from "axios";
    export default {
      data() {
        return {
          data: [],
        };
      },
      mounted() {
        axios.get("/ajax/movieOnInfoList?token=").then((res) => {
          this.data = res.data.movieList;
        });
      },
    };
    
    成功获取到接口返回的数据.png

    2、alias别名配置

    @是一个alias,意味着从根目录下面开始查找文件

    3、配置publicPath:'./'

    在Cordova hybrid应用中做混合开发的时候,有时候本地的目录是/app,但是需要编译后为./app,就可以使用这个处理,这个publicPath属性就是编译后去修改路径。

    4、关闭eslint

    在vue.config.js中,使用
    lintOnSave : false去关闭eslint代码校验
    再把.eslintrc删除掉或者把@vue/standard注释掉

    5、在MPA模式下开发构建页面的配置

    在multi-page模式下构建应用,每个page应该有一个对应的JavaScript入口文件,其值应该是一个对象,对象的key是入口的名字,value是:

    • 指定了entry, template, filename, title, 和chunks的对象(除了entry其他都是可选的)
    • 或一个指定其entry的字符串
    module.exports = {
        pages:{
              index:{
                // page的入口
                 entry : 'src/index/main.js',
                 // 模板来源
                  template : 'public/index.html',
                 // 在dist/index.html的输出
                  filename : 'index.html',
                  // 当使用title选项时
                  // template中的title标签要是<title><%= htmlWebpackPlugin.options.title %></title>
                  title : 'Index Page',
                  // 在这个页面中包含的块,默认情况下会包含
                  // 提取出来的通用 chunk和 vendor chunk
                  chunks : ['chunk-vendors' , 'chunk-common' , 'index']
              },
                  // 当使用只要入口的字符串格式时
                  // 模板会被推导为 'public/subpage.html'
                  // 并且如果找不到的话,就会被回退到'public/index.html'
                  // 输出文件名会被推导为'subpage.html'
                  subpage : 'src/subpage/main.js'
          }
    }
    

    相关文章

      网友评论

        本文标题:Vue方向:理解vue.config.js配置文件

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