使用vue-cli开发的时候,npm run dev生成的默认链接是http://localhost:8080,看上去很不爽,于是就尝试使用nginx反向代理给这个链接取个自定义域名,还真成功了,话不多说直接上代码:
1、修改host。文件:/config/index.js
host: '127.0.0.1',
port: 8080,
2、禁用webpack的hostCheck。文件:/build/webpack.dev.conf.js (禁用此项是为了不让wepack报错,不影响开发和生产)
devServer: {
disableHostCheck: true, //在原有的devServer下增加一个disableHostCheck值为true
... //这里是折叠起来的原有的代码
}
3、安装并配置nginx文件,开一个server
server {
listen 80;
server_name example.com;
location / {
proxy_pass http://127.0.0.1:8080/; //这个地址就是第1步里面的,要对应
}
}
4、修改host,即在host下增加如下代码:
127.0.0.1 example.com
5、启动nginx,启动开发环境下的vue,我用的npm,就直接npm run dev
6、在浏览器里输入你自己定的域名,我这里写的是example.com做为例子,可自定义。
这样就能用自己定义的域名访问vue开发环境了。