vue 编译之后的,用nginx启动

1,vue 编辑,我现在用的还是vue2.0,编译用的最直接的 npm run build
2.编译之后生成 dist文件

3.安装nginx ,我用的是mac,执行命令 brew install nginx 中途有n多坑。先略过
4.nginx -v 查看安装的nginx 的版本号
5。执行 nginx 命令 ,启动nginx 服务
6. 执行 nginx -s reload ,重启nginx 服务
7. 执行 vim /usr/local/etc/nginx/nginx.conf 编辑nginx 配置,按 i 进入编辑状态
8. nginx -s stop 立即停止服务
9. nginx -s quit 从容停止服务
10.由于不习惯在终端进行文件修改,我习惯用编辑器打开文件。首先 打开finder ,然后按下 shift+command+G 跳出窗口 前往文件夹,输入地址usr/local/etc/nginx/nginx.conf 然后把 选中的文件通过编辑器打开。

以上为 关于 nginx 的安装,操作
下面开始配置吧

location /api {
       proxy_pass https://XXX.XXX.XXX.XXX;  #代理的域名
       add_header 'Access-Control-Allow-Origin' '*'; 
       add_header 'Access-Control-Allow-Credentials' 'true'; 
   }
   location  / {
       root   /usr/local/var/www/dist;    #dist在服务器的路径
       index  index.html index.htm;
   }

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
nginxvue可以一起使用来部署前端应用。以下是一种常见的配置方法: 1. 首先,确保你已经安装了NginxVue CLI。 2. 在Vue项目的根目录下,使用命令行工具运行`npm run build`,这将生成一个dist目录,包含了编译后的静态文件。 3. 打开Nginx的配置文件,一般位于`/etc/nginx/nginx.conf`或`/etc/nginx/conf.d/default.conf`。 4. 在`http`块中添加一个新的`server`块,配置Vue应用的代理和静态文件路径。示例配置如下: ``` server { listen 80; server_name your_domain.com; location / { root /path/to/vue_project/dist; try_files $uri $uri/ /index.html; } location /api/ { proxy_pass http://your_backend_server; } } ``` - `listen 80;`:指定Nginx监听的端口,可以根据需要修改。 - `server_name your_domain.com;`:指定你的域名或IP地址。 - `root /path/to/vue_project/dist;`:指定Vue项目编译后的静态文件所在的路径。 - `try_files $uri $uri/ /index.html;`:配置前端路由,使得任意路由都返回index.html,以便Vue应用处理路由跳转。 - `location /api/`:配置后端接口代理,将以`/api/`开头的请求转发到你的后端服务器。 5. 保存并关闭Nginx配置文件。 6. 重启Nginx服务,使配置生效。使用命令`sudo service nginx restart`或`sudo systemctl restart nginx`。 现在,当访问你的域名或IP地址时,Nginx会将请求转发到Vue应用,并将静态文件提供给浏览器。同时,以`/api/`开头的请求将被代理到你的后端服务器。请根据你的实际情况进行适当的修改。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值