nginx项目部署的基本配置_nginx 在config.js

##　项目部署前提：
＊　　知道服务器的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>
}
1
2
3

（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"
}
1
2
3

重新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>
1
2

（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;
       }
    }
1
2
3
4
5
6
7
8
9
10
11