Vue3 学习笔记 09

1. 跨域

端口号不同
1.静态资源和API服务器放到一起
2.服务器关闭跨域
3.nignx代理
4.在仅仅只是开发时，配置devServe即可
    在webpack.config.js下的derserve下，配置proxy
    `proxy: {
        "/api": "http://localhost:8888", //开启本地服务器代理
    }` //有问题，请求地址为http://localhost:8888/api/users
    
    解决方案
    proxy:{
        "api": {
            target: "http://localhost:8888",
            pathRewrite: { '^/api': '' }  //正则写法，匹配上/api就替换为空字符串
            //sercure: true, //安全，默认情况不接受转发https的https的服务器上
            //changeOrigin: true, //修改源
        }
    }

2.webpack.config.js配置项

1.resolve：{//路径相关的配置
    extensions: [".js",".json",".mjs"], //引用时不写后缀会自动依次排查
    alias：{
        "js": path.resolve(__dirname: "./src/js"), //__dirname本地文件上一级最大的目录
    }
}

2.devServer: {
    contentBass: "./public", //备份的，没有被webpack加载到的资源会到此处寻找 
    hotL true, //模块热替换
},
target: "web"//web环境下的热替换，需要同时设置

3.webpack 生产与开发分离，根目录创建config，配置三个wepack.config.js

4. webpack-dev-server -D //-D开发依赖，摆脱vue插件live-server实现实时刷新，