1.vue打包

npm run build

把dist目录下的文件拷贝到nginx相应目录下

2.nginx配置

vue代码部署到ng上默认是listen的端口80，请求后台服务器和端口需要配置下反向代理

server {
        listen       80; #默认端口，前端会访问这个，下边做反向代理到服务端
        server_name  liangyb.top;

    location / {#默认根目录
            root   /usr/local/services/abcregist/client;
            index  index.html index.htm;
        }

    #abc
    location ~^/abc/ { #反向代理
            proxy_read_timeout 300;
        proxy_pass http://49.233.163.14:8080;
        }
        #pc管理端
    location /manage {#指定manage目录，需要在vue代码中指定
        alias /usr/local/services/abcregist/manage;
        expires  1d;
        index index.html;
        autoindex on;
        }
        #mdr
        location /backStageManage {//一定不能包含反向代理名称
            alias /usr/local/services/mdr;
            expires  1d;
            index index.html;
            autoindex on;
        }
        location ~^/mdr/ {
            proxy_read_timeout 300;
            proxy_pass http://192.144.234.166:12893;
            }

3.vue指定打包目录

3.1 vue-cli2版本

config目录下index.js

 build: {
    env: require('./prod.env'),
    index: path.resolve(__dirname, '../dist/index.html'),
    assetsRoot: path.resolve(__dirname, '../dist'),
    //nginx配置
    assetsSubDirectory: 'static',
    //指定指定路径“manage”，和nginx对应，默认根目录‘/’
    assetsPublicPath: '/manage',
    productionSourceMap: true,

3.2 vue-cli3版本

根目录下新建vue.config.js文件

module.exports = {

  publicPath: './', //静态资源的路径，不能像cli2一样修改这里
  outputDir: 'target/mdr-fe', //build输出目录和名称
  assetsDir: 'static',
  lintOnSave: false,
  productionSourceMap: true,
  devServer: {
    port: port,
    // host: host,
    open: true,
    overlay: {
      warnings: false,
      errors: false
    },
    disableHostCheck: true,
    proxy: {
      '/mdr/api': {
        target: `http://localhost:12893`,
        changeOrigin: true
      },
    },
  },
  configureWebpack: {
   name: name,
    resolve: {
      alias: {
        '@': resolve('src')
      }
    },
    performance: {
      hints: false
    },
    plugins: [
      new webpack.ProvidePlugin({
        $: 'jquery',

        jQuery: 'jquery',

        'windows.jQuery': 'jquery'
      })
    ]
  },
  chainWebpack(config) {
    config.plugins.delete('preload') // TODO: need test
    config.plugins.delete('prefetch') // TODO: need test

    // set svg-sprite-loader
    config.module
      .rule('svg')
      .exclude.add(resolve('src/resources/icons'))
      .end()
    config.module
      .rule('icons')
      .test(/\.svg$/)
      .include.add(resolve('src/resources/icons'))
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]'
      })
      .end()

    // set preserveWhitespace
    config.module
      .rule('vue')
      .use('vue-loader')
      .loader('vue-loader')
      .tap(options => {
        options.compilerOptions.preserveWhitespace = true
        return options
      })
      .end()

    config
    // https://webpack.js.org/configuration/devtool/#development
      .when(process.env.NODE_ENV === 'development', config => config.devtool('source-map'))

    config.when(process.env.NODE_ENV !== 'development', config => {
      config
        .plugin('ScriptExtHtmlWebpackPlugin')
        .after('html')
        .use('script-ext-html-webpack-plugin', [{
          // `runtime` must same as runtimeChunk name. default is `runtime`
          inline: /runtime\..*\.js$/
        }])
        .end()
      config.optimization.splitChunks({
        chunks: 'all',
        cacheGroups: {
          libs: {
            name: 'chunk-libs',
            test: /[\\/]node_modules[\\/]/,
            priority: 10,
            chunks: 'initial' // only package third parties that are initially dependent
          },
          elementUI: {
            name: 'chunk-elementUI', // split elementUI into a single package
            priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
            test: /[\\/]node_modules[\\/]_?element-ui(.*)/ // in order to adapt to cnpm
          },
          commons: {
            name: 'chunk-commons',
            test: resolve('src/components'), // can customize your rules
            minChunks: 3, //  minimum common number
            priority: 5,
            reuseExistingChunk: true
          }
        }
      })
      config.optimization.runtimeChunk('single')
    })
  }
}

4.访问

http://1111.111.111.1/#/
http://1111.111.111.1/manage/#/