Vue项目history模式打包生产部署的两种方式

一、部署在tomcat
1、解决history模式，报404。直接在Tomcat中的web.xml中加入以下内容解决：

<error-page>    
    <error-code>404</error-code>    
    <location>/</location>    
</error-page> 

2、config文件夹中，index.js文件代码打包配置如下，此处只展示build节点

build: {
    
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/dist/',

    /**
     * Source Maps
     */

    productionSourceMap: false,
    // https://webpack.js.org/configuration/devtool/#production
    devtool: '#source-map',

    // Gzip off by default as many popular static hosts such as
    // Surge or Netlify already gzip all static assets for you.
    // Before setting to `true`, make sure to:
    // npm install --save-dev compression-webpack-plugin
    productionGzip: false,
    productionGzipExtensions: ['js', 'css'],

    // Run the build command with an extra argument to
    // View the bundle analyzer report after build finishes:
    // `npm run build --report`
    // Set to `true` or `false` to always turn it on or off
    bundleAnalyzerReport: process.env.npm_config_report
  }

3、代码中解决静态资源无法找到，比如图片的路径必须定位到精确目录。

<img src="../../../static/image/complain1.png" class="card-img">

二、Nginx部署
1、Nginx配置如下
我们的项目URL是：http://fat2.test.cn/dist
在/etc/nginx/conf.d目录下，新建一个fat2.test.cn.conf的配置文件，内容如下：

server {
    listen       80;         #监听的端口
    server_name  fat2.test.cn;    #监听的URL

    location / {
      root /root/server/vue/dist/;             #项目路径
      index /index.html;                        
      try_files $uri $uri/ /index.html;        #匹配不到任何静态资源，跳到同一个index.html
    }
    
    #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   /usr/share/nginx/html;
    }

}

2、config文件夹中，index.js文件代码打包配置如下，此处只展示build节点

build: {
    
    // Template for index.html
    index: path.resolve(__dirname, '../bzf/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../bzf'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',

    /**
     * Source Maps
     */

    productionSourceMap: false,
    // https://webpack.js.org/configuration/devtool/#production
    devtool: '#source-map',

    // Gzip off by default as many popular static hosts such as
    // Surge or Netlify already gzip all static assets for you.
    // Before setting to `true`, make sure to:
    // npm install --save-dev compression-webpack-plugin
    productionGzip: false,
    productionGzipExtensions: ['js', 'css'],

    // Run the build command with an extra argument to
    // View the bundle analyzer report after build finishes:
    // `npm run build --report`
    // Set to `true` or `false` to always turn it on or off
    bundleAnalyzerReport: process.env.npm_config_report
  }

3、静态资源路径如下即可：

<img src="/static/image/complain1.png" class="card-img">