使用nginx给vue开发环境的地址自定义一个域名

最新推荐文章于 2024-01-09 15:47:48 发布

神烦大人

最新推荐文章于 2024-01-09 15:47:48 发布

阅读量837

点赞数

分类专栏：工具箱文章标签： vue nginx 反向代理 dev

本文链接：https://blog.csdn.net/lifachang/article/details/103202207

版权

15 篇文章 0 订阅

订阅专栏

使用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开发环境了。

关注