nginx项目部署的基本配置

## 项目部署前提:
*  知道服务器的ip,用户名和密码(需要进入到服务主机)
- 服务器所在的目录

本地练习:
1、创建本地服务,使用nginx软件创建本地服务, 下载地址(http://nginx.org/en/download.html)
2、下载解压的目录如下图:
在这里插入图片描述

2、双击nginx.exe打开服务,在浏览器中输入localhost既可以访问到nginx服务中的默认页面,默认访问是html中的文件,

3、部署自己的项目,
(1)若html文件夹中无其他项目:
使用npm run build命令对项目进行打包,会得到一个dist文件夹,(默认情况下,dist文件夹中的文件使用的是根目录下的资源文件),将dist文件夹中的所有文件放置在上图的html中,在浏览器中输入localhost 即可浏览自己的项目

默认情况下,dist文件夹中的index.html文件引用的是根目录下的资源文件,如下:

	<link href=/css/chunk-1c5f636e.4f3d6bde.css rel=prefetch>
    <link href=/js/chunk-1c5f636e.ea83027c.js rel=prefetch>
}

(2)若在nginx的html文件中新建自己的项目文件夹
需要在开发模式下配置vue.config.js文件,然后充新运行npm run build命令获取新的dist文件夹,并将dist中的文件放置在新建的admin文件夹中,例如:在html文件夹中创建自己的项目文件夹admin,在开发模式下创建vue.config.js,浏览器输入localhost/admin 即可浏览自己的项目,vue.config.js文件内容如下:

	module.exports={
    	publicPath:"/admin"
}

重新npm run build之后,可以看到dist文件夹中的index.html文件使用的admin文件下的资源文件,如下:

 	<link href=/admin/css/chunk-1c5f636e.4f3d6bde.css rel=prefetch>
    <link href=/admin/js/chunk-1c5f636e.ea83027c.js rel=prefetch>

(3)若不想使用nginx的默认文件夹html,例如创建一个www文件夹,则需要配置nginx的nginx.conf文件,代码如下:

# another virtual host using mix of IP-, name-, and port-based configuration
    #
    server {
       listen       8000;   //端口号
       server_name  localhost; // 主机名

       location / {
           root   www;  // 根文件夹的名称
           index  index.html index.htm;
       }
    }
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值