vue项目Nginx部署启动

1.vue打包

        (1)package.json增加打包命令

  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --host 10.16.14.110",
    "start": "npm run dev",
    "unit": "jest --config test/unit/jest.conf.js --coverage",
    "e2e": "node test/e2e/runner.js",
    "test": "npm run unit && npm run e2e",
    "build": "node build/build.js",
    "build:prod": "webpack-dev-server build",
    "build:stage": "webpack-dev-server build --mode staging"
  },

      (2)指定打包后的文件名(index.js)

        

      (3)打包

2.nginx部署

        (1)上传dist文件到Nginx

      (2)修改配置文件

       server {
        listen       8099;#启动端口
        server_name  localhost;#本机IP
        location / {
    	#add_header Access-Control-Allow-Origin "*";
            root  html/sso;
	    try_files $uri $uri/ /index.html;
            index  index.html index.htm;
        }
	location /prod-api {
			proxy_pass http://后端接口地址;
		}
 
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html/sso;
        }
    }

3.重启nginx

        

4.访问流程

       

### 如何在本地使用Nginx部署Vue.js项目 #### 准备工作 为了成功地将Vue.js项目部署Nginx,在开始之前需确保已安装Node.js环境以及Nginx服务。Node.js用于构建Vue应用,而Nginx作为Web服务器来提供静态资源。 #### 构建Vue项目 完成开发后的Vue项目需要被打包成生产版本以便于发布。通过命令行工具执行`npm run build`可以编译并优化整个应用程序,生成的文件会被放置在一个名为`dist`的新目录下[^2]。 ```bash npm run build ``` 此过程会创建一个适合生产的精简版网站结构,其中包含了HTML、CSS和JavaScript等静态资产。 #### 安装与启动Nginx 对于未曾安装过Nginx的情况,可以通过包管理器如APT(适用于Debian/Ubuntu系统)来进行快速设置: ```bash sudo apt update && sudo apt install nginx ``` 安装完成后,可通过如下指令验证Nginx是否正常运作: ```bash sudo systemctl status nginx ``` #### 修改Nginx配置文件 为了让Nginx能够正确识别并托管Vue项目的静态文件,编辑位于`/etc/nginx/sites-available/default`中的默认站点配置是非常必要的。打开该文件并将根路径指向先前由Vue CLI生成的`dist`目录内。以下是推荐的一个基本配置实例: ```nginx server { listen 80; server_name localhost; location / { root /path/to/your/project/dist; # 替换为实际路径 try_files $uri $uri/ /index.html; } } ``` 上述配置指示Nginx监听HTTP端口,并针对所有请求尝试匹配具体的文件;如果没有找到,则返回`index.html`以支持SPA路由模式[^4]。 #### 测试更改并重启Nginx 保存所做的修改后,应当先测试新配置的有效性再重新加载Nginx使改动生效: ```bash sudo nginx -t sudo systemctl reload nginx ``` 一旦确认无误,浏览器访问http://localhost即可看到已经上线运行的Vue应用[^3]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值