部署前端vue项目

1.打包vue

先保证你的本地打包后是正常的，不要有白板的那种现象出现。
1.npm install
2.npm run dev或者npm run serve(视情况而定)
3.npm run build
可能出现的问题：白板问题：
解决方法：
1.在vue.config.js里加publicPath: “./”,

// 引入等比适配插件

const webpack = require('webpack')


module.exports = {
    // 基本路径
    publicPath:  "./",
    // 输出文件目录
    outputDir: 'dist',
    configureWebpack: {
        plugins:[
            new webpack.ProvidePlugin({'window.Quill':'quill/dist/quill.js','Quill':'quill/dist/quill.js','window.Quill': 'quill'})
        ],
        externals: {
        }
    }
}

2.路由配置mode: ‘hash’ 不要用history
3.public下的图片之类的静态文件最好不要有，放到data-showimg下最好
4.注意.env.production文件里的请求后台的路径设置

2.安装并配置Nginx

2.1安装pcre开发包

yum install -y pcre-devel 

2.2安装其他依赖

yum -y install make zlib zlib-devel gcc-c++ libtool openssl openssl-devel

2.3下载nginx包

我一般是cd到opt目录理下载安装东西

wget http://nginx.org/download/nginx-1.16.1.tar.gz

2.4解压nginx安装包

tar -zxvf nginx-1.16.1.tar.gz

进入解压后的目录后执行./configure
make && make install 编译并安装

2.5启动nginx

默认是在usr/local/nginx/sbin

./nginx

还可以指定某个特定的配置文件启动

./nginx -c /usr/local/nginx/conf/nginx.conf

2.6测试nginx配置是否正确

有的时候修改完nginx的配置文件后想测试下是否正确

./nginx -t

2.7重启nginx

./nginx -s reload

当出现以下页面就说明Nginx安装并启动成功了

3.发布项目

直接把上面咱们打包好的dist改个名字后通过xftp上传到服务器的nginx的html目录下