vue-cli项目打包+部署到nginx

1，vue-cli打包。2，部署到服务器（我使用的服务器使Ubuntu）

1，vue-cli打包。

修改vue.config.js

publicPath: '/',

打包，打包后会生成dist文件夹，dist文件夹下的文件就是需要部署的文件，在本地无法访问。

打包正式环境npm run build:prod打包预发布环境npm run build:stage

2，部署到服务器（我使用的服务器使Ubuntu）

安装Nginx

sudo 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