记录vue-cli3.0配置文件vue.config.js的问题

1、脚手架搭建项目

  • vue-cli2.x版本搭建项目使用的命令是vue init webpack test1,test1是项目名
  • vue-cli3.0版本搭建项目使用的命令是vue create test2,test2是文件名

2、在使用vue-cli搭建vue项目的时候，由于3.0比起2.x精简了许多配置文件，所以需要自己手动配置相关的配置文件，即在根目录下新建一个vue.config.js，并在其中配置相关选项。

config配置归纳，大多数是默认的。

 1 module.exports = {
 2     // 基本路径
 3     baseUrl: '/',
 4     // build构建文件时输出文件目录
 5     outputDir: 'dist',
 6     // eslint-loader 是否在保存的时候检查
 7     lintOnSave: false,
 8     // webpack配置
 9     chainWebpack: () => { },
10     configureWebpack: () => { },
11     // 生产环境是否生成 sourceMap 文件
12     productionSourceMap: true,
13     // css相关配置
14     css: {
15         // 是否使用css分离插件 ExtractTextPlugin
16         extract: true,
17         // 开启 CSS source maps?
18         sourceMap: false,
19         // css预设器配置项
20         loaderOptions: {},
21         // 启用 CSS modules for all css / pre-processor files.
22         modules: false
23     },
24     parallel: require('os').cpus().length > 1,
25     pwa: {},
26     // webpack-dev-server 相关配置
27     devServer: {
28         open: true,                                 //配置自动启动浏览器
29         host: 'localhost',
30         port: 8080,                                 // 端口号
31         https: false,
32         hotOnly: false,                             // https:{type:Boolean}
33         proxy: {                                        // 配置跨域
34             '/api':{
35                 target:'http://xxx.xx.xxx.xxx:8080', //源地址
36                 changeOrigin:true,                  //改变源
37                 ws:true,                            //是否代理websockets
38                 pathRewrite:{
39                     '^/api':''
40                 }
41             }
42         },                                           // 配置跨域处理,只有一个代理
43         before: app => { }
44     },
45     // 第三方插件配置
46     pluginOptions: {}
47 }

webpack-dev-server的配置

  • open:项目通过npm run serve编译好后是否自动打开项目网站
  • host:这个东西就很有讲究了：网上好多都是配置为host: '0.0.0.0',如果将其设置为host: '（本机IP地址）',host: 'localhost',都能正常请求到数据。    

区别：

1、host: '0.0.0.0':你既可以在本地用http://localhost/yoursite的url访问项目，也可以用http://xxx.xx.xxx.xxx/yoursite访问项目。其中xxx.xx.xxx.xxx是你的本机IP。

比如你的计算机IP地址是123.45.67.89，项目名称是app，那么你的访问url就可以是http://localhost/app，或者http://10.1.5.84:8080/.8089/app

这样设置的好处是，当你想用非本机访问项目进行测试时，由ip地址构建的url可以对项目进行访问，同时本地还可以用localhost进行访问

2、host: '10.1.5.84:8080/.8089': 如果将IP写死了，那么只有这个'10.1.5.84:8080/.8089'IP才可以访问调用接口数据，那么localhost就无法访问了（除非localhost就是这个IP）

proxy:设置代理

因为浏览器的同源策略，调用不同域的资源就会产生跨域的问题，所以需要设置代理配置跨域，才能正常请求到其他域下的资源
设置代理, 首先得有一个标识, 确认哪一个连接要用代理. 不然的话, html, css, js这些静态资源都使用代理的网址调用. 所以只有需要调用的接口用代理, 静态文件用本地.
  • '/api':{}：接口只要是'api'开头的才用代理.这个'api'即标识
  • target:源地址，即请求接口的url前缀，如果我的接口都在http://xxx.xx.com下，那么源地址就是http://xxx.xx.com
  • changeOrigin:是否允许跨域
  • ws:是否代理websockets
  • pathRewrite:{'^/api':''}:顾名思义，这是 ' 路径重写 ’ 的意思   
    当设置了标识符后，接口调用就要这么写 :/api/delete?id=123，最后请求的路径就是 http://xxx.xx.com/api/delete?id=123.但是如果正确的接口路径里面没有/api. 所以就需要 pathRewrite,用'^/api':'', 把'/api'用空字符代替,最后请求的路径就是http://xxx.xx.com/delete?id=123了.这样既能有正确标识, 又能在请求接口的时候去掉api.
同理,proxy配置多个代理,使用不同对象进行分开配置:
proxy: {                                 // 配置多个代理
            '/api': {
                target: '<url>',
                ws: true,
                changeOrigin: true
            ……
            },
            '/foo': {
                target: '<other_url>'
            ……
            }
        },

 

posted @ 2021-04-15 14:29  〆浮生如梦〆  阅读(321)  评论(0)    收藏  举报