Nginx部署vue项目

nginx部署Vue-cli的前端项目详细介绍

因为公司的部署人员不会用Nginx部署vue项目，所以部署项目就只能我们开发来完成了。

1、安装Nginx

注：以window系统为例

官网：http://nginx.org/en/download.html

下载niginx压缩包并解压到任意目录，如下所示：

2、启动Nginx

直接双击nginx.exe（双击后一个黑色的弹窗一闪而过），在浏览器中访问http://localhost，如果出现Welcome to nginx!页面则说明成功。

Nginx常用命令：

nginx -h # 打开帮助
nginx -t # 检查配置文件是否正确
以下命令均要先启动nginx才能执行
nginx -s stop # 停止 nginx -s quit # 退出
nginx-s reopen # 重新启动（注意不会重新读取配置文件）
nginx -s reload # 重新读取配置文件

3、对于vue的项目，修改配置文件 （我这是用vue-cli创建的项目，所以在vue.config.js里面修改配置文件）：

module.exports = {
	// 基本路径
	publicPath:'/',
	// 输出文件目录
	outputDir: 'dist', // 默认dist
	// 用于嵌套生成的静态资产（js,css,img,fonts）目录
	// assetsDir: '',
	// 指定生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径
	indexPath: 'index.html', // Default: 'index.html'
	filenameHashing: true,
	// 构建多页时使用
	pages: undefined,
	// eslint-loader是否在保存的时候检查
	lintOnSave: true,
	// 是否使用包含运行时编译器的Vue核心的构建
	runtimeCompiler: false,
	// 默认情况下 babel-loader 会忽略所有 node_modules 中的文件。如果你想要通过 Babel 显式转译一个依赖，可以在这个选项中列出来
	transpileDependencies: [],
	// 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。
	productionSourceMap: false,
	// 如果这个值是一个对象，则会通过 webpack-merge 合并到最终的配置中。如果这个值是一个函数，则会接收被解析的配置作为参数。该函数及可以修改配置并不返回任何东西，也可以返回一个被克隆或合并过的配置版本。
	configureWebpack: config => {
		if (process.env.NODE_ENV === 'production') {
			// 为生产环境修改配置...
		} else {
			// 为开发环境修改配置...
		}
	},
  // 配置 webpack-dev-server 行为。
  devServer: {
    port: 9090, // 端口号
    disableHostCheck: true,
    host: "0.0.0.0",
    https: false, // https:{type:Boolean}
    open: false, //配置自动启动浏览器
    proxy:{
      '/host': {     //这里最好有一个 /
        target: http://xx.xx.xx ,  // 这个位置是接口
        ws: true,        //如果要代理 websockets，配置这个参数
        // changeOrigin: true,  //是否跨域
        pathRewrite:{
            '^/host': ''
        }
      }
    },
    before: app => {
    },
  },
  // 三方插件的选项
  pluginOptions: {
      // ...
  },
}                  （注：这些配置文件在网上都可以找到）

4、在vue项目根目录中使用命令npm run build 创建输出文件，将dist文件夹下的所有内容复制到nginx目录下的html文件夹里面

5、修改Nginx的配置文件（nginx的配置文件是conf目录下的nginx.conf）

6、启动Nginx，然后在浏览器中打开 就可以了。

此文章仅供用参考，如有不对的地方，请指出，希望此文章对您有帮助，早日部署好自己的项目。

请各位多多发表自己的意见，转载请注明来源。