nginx部署vue

配置vue.config.js

build前配置publicPath:'/',，配置文件如下:

const CompressionPlugin = require("compression-webpack-plugin");

module.exports = {
  outputDir:'index',
  publicPath:'/',  // 加入此配置项
  productionSourceMap:false,
  devServer: {
    public: '127.0.0.1:8080',
    hot: true,
    disableHostCheck: true,
  },
  css:{
    requireModuleExtension: true,
    loaderOptions:{
      less:{
        javascriptEnabled: true
      }
    }
  },
  chainWebpack:config=>{
    if(process.env.NODE_ENV==="production"){
      config.optimization.minimize(true);
      config.optimization.splitChunks({
        chunks: 'all'
      });
    }
  },
  configureWebpack:{
    optimization: {
      splitChunks: {
        chunks: "all",//(all/async/initial)默认async异步，分割成代码块的方式
        //针对同步代码,还必须配置cacheGroups,不然无法实现代码分割 .
        //教程中对于异步不用配置cacheGroups也实现了分割.
        minSize: 30000, //引入的包大于30KB才做代码分割
        maxSize:50000,//打包的后的chunk大于200KB会再次分割..
        minChunks: 1, //当一个包至少被用了多少次的时候才进行代码分割
        maxAsyncRequests: 10, //同时加载的模块数最多是5个,超过不会再做代码分割.
        maxInitialRequests: 8, //入口文件做代码分割最多能分成3个js文件
        automaticNameDelimiter: '~',//文件生成时的连接符
        name: true,//让cacheGroups里设置的名字有效
        cacheGroups: { //缓存组的意思,如果引入多个模块都缓存到一个组里,然后统一分配打包
          vendors: { //分割代码块的设置. 每个组的名是自己随便起的
            test: /[\\/]node_modules[\\/]/,//检测引入的库是否在node_modlues目录下 如果是则执行下面的打包规则
            priority: -10,//优先级, 值越大,优先级越高.模块先打包到优先级高的组里
            // filename: 'vendors.js'//把所有的库都打包到一个叫vendors.js的文件里 如果没有配置则会默认生成.
          },
          default: { //默认的分割代码块的配置.
            priority: -20, //优先级,值越大代码块会优先以该配置组的配置打包.
            reuseExistingChunk: true,//如果一个模块已经被打包过了,那么再打包时就忽略这个模块
            // filename: 'common.js'
          }
        }
      }
    }
  },
};

配置nginx

修改conf目录下的nginx.conf 这里直接使用了根目录，配置文件如下


#user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;

    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';

    #access_log  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;

    server {
        listen       80;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   D:\work_space\services-platForm\index;  // npm run build 之后的打包目录
            index  index.html index.htm;
        }

        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

        # proxy the PHP scripts to Apache listening on 127.0.0.1:80
        #
        #location ~ \.php$ {
        #    proxy_pass   http://127.0.0.1;
        #}

        # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
        #
        #location ~ \.php$ {
        #    root           html;
        #    fastcgi_pass   127.0.0.1:9000;
        #    fastcgi_index  index.php;
        #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
        #    include        fastcgi_params;
        #}

        # deny access to .htaccess files, if Apache's document root
        # concurs with nginx's one
        #
        #location ~ /\.ht {
        #    deny  all;
        #}
    }


    # another virtual host using mix of IP-, name-, and port-based configuration
    #
    #server {
    #    listen       8000;
    #    listen       somename:8080;
    #    server_name  somename  alias  another.alias;

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


    # HTTPS server
    #
    #server {
    #    listen       443 ssl;
    #    server_name  localhost;

    #    ssl_certificate      cert.pem;
    #    ssl_certificate_key  cert.key;

    #    ssl_session_cache    shared:SSL:1m;
    #    ssl_session_timeout  5m;

    #    ssl_ciphers  HIGH:!aNULL:!MD5;
    #    ssl_prefer_server_ciphers  on;

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

}

启动nginx

最后编辑于：2022.01.20 12:18:25