vue-cli项目打包+部署到nginx
1,vue-cli打包。2,部署到服务器(我使用的服务器使Ubuntu)1,vue-cli打包。
修改vue.config.jspublicPath: '/',
打包,打包后会生成dist文件夹,dist文件夹下的文件就是需要部署的文件,在本地无法访问。
打包正式环境npm run build:prod打包预发布环境npm run build:stage
2,部署到服务器(我使用的服务器使Ubuntu)
安装Nginxsudo apt-get install nginx安装好Nginx目录为etc/nginx
etc/nginx/conf.d中配置nginx
单独创建一个文件
server {listen 80;server_name www.****.cn;//访问地址root /www/wwwroot/quickCn;//静态文件路径,指向项目文件路径,将dist下的文件放在此处location ~*(^\/(api)) {//api访问代理配置proxy_pass http://api.****.cn;//服务端请求代理路径proxy_set_header X-Real-IP $remote_addr;proxy_set_header X-Forward-For $proxy_add_x_forwarded_for;proxy_set_header Host $http_host;proxy_set_header X-Nginx-Proxy true;}location ~.*\.(js|css|ico|png|jpg|eot|svg|ttf|woff|html|txt|pdf|) {//静态文件访问路径设置root /www/wwwroot/quickCn;}location / {//处理刷新页面空白try_files $uri $uri/ /index.html;}}
重启Nginx即可; 若Nginx文件地址始终指向默认文件,可修改Nginx默认文件路径
(/etc/nginx/sites-enabled/default)
修改root指向路径root /www/wwwroot