vue-cli项目打包 并且用Nginx部署

build前修改配置

build --> utils.js

// Extract CSS when that option is specified
    // (which is the case during production build)
    if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        publicPath:‘../../‘, //加上段代码，防止打包后丢失图片路径
        fallback: ‘vue-style-loader‘
      })
    } else {
      return [‘vue-style-loader‘].concat(loaders)
    }
  }

config --> index.js

build: {
    //...

    // Paths
    assetsRoot: path.resolve(__dirname, ‘../dist‘),
    assetsSubDirectory: ‘static‘,
    assetsPublicPath: ‘./‘,  //修改后路径

    //...
   }

src --> main.js :如果使用了Element-UI等其他引入的组件

import Vue from ‘vue‘
import App from ‘./App‘
import ElementUI from ‘element-ui‘
import ‘element-ui/lib/theme-chalk/index.css‘
import router from ‘./router‘  //router要最后import，否则element样式可能会错乱
Vue.config.productionTip = false
Vue.use(ElementUI)

new Vue({
  el: ‘#app‘,
  router,
  components: { App },
  template: ‘<App/>‘
})

打包

根目录下在终端执行:

npm run build

项目根目录下生成dist文件夹，这是打包好的项目，将它传到你要部署的服务器，放在哪里都可以，我就放在C:\下。

有关vue-cli项目中 config --> index.js 文件配置的更多内容，参考这篇博客:

https://blog.csdn.net/hanghangaidoudou/article/details/80839713?depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-2&utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-2

Nginx下载

http://nginx.org/en/download.html 官方下载链接

将这个压缩文件在服务器中解压，解压后放哪里都可以。

Nginx配置

conf --> nginx.conf 初始配置如下：

http {
    #...

    server {
        listen       80;
        server_name  localhost;

        location / {
            root   html;
            index  index.html index.htm;
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }

    #...
}

一般来说只需改动server里的内容:

http {
    #...

    server {

        #端口，可改动，但是此前要先查看想改动的端口是否被占用
        #想要被其他用户访问的话记得设置服务器的安全组
        listen       80;

        server_name  localhost;

        location / {

            #改动2-2：
            try_files $uri $uri/ @router;

            #改动1：这里改成打包好的dist文件夹的绝对路径
            root   C:\dist; 

            index  index.html index.htm;
        }

        #改动2-1：路由重写，防止history模式下刷新页面404
        #      但是这样改动之后在其他页面刷新/后退等操作都会回到index.html页面
        location @router {
            rewrite ^.*$ /index.html last;
        }

        #改动3：设置跨域
        location /api {
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Nginx-Proxy true;
            proxy_set_header Connection "";

            #跨域访问的后端地址
            proxy_pass http://120.xx.xxx.xxx:81;

            #我们发送请求的url如果是形如‘/api/getMsg?param=N‘
            #重写后就会变为‘http://120.xx.xxx.xxx:81/getMsg?param=N‘
            rewrite  ^/api/(.*)$ /$1 break;
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }

    #...
}

个人认为重写是有必要掌握的，可以参考下面链接学习：

https://www.jianshu.com/p/a8261a1a64f8

启动Nginx服务

可以直接双击nginx解压后文件夹下的nginx.exe启动服务，也可以使用命令行终端：

nginx.exe所在目录> start nginx

其他命令:

nginx.exe?-s?stop 不保存相关信息
nginx.exe?-s?quit 可保存相关信息
nginx.exe?-s?reload 修改配置后重启服务
netstat -aon|findstr "80" 查看端口有“80”字段的服务
taskkill /f /t /im nginx.exe 终止Nginx服务

原文地址：https://www.cnblogs.com/hhtqwq/p/12700354.html