vue.co nfig.js配置、会社の実戦プロジェクト

vue-cli 3.0の後で、vue-cli 2.xの中でbuild、configディレクトリの下の配置を必要とします.vue.co nfig.jsの中にvue-cli 3.xを配置しました.vue.cli 4.xはVue.com fig.jsファイルがないので、自分で手動で下記の実戦プロジェクトを展示する配置が必要です.主に下記の機能があります.コードの熱更新4、解決は乗り越えて、リバースプロキシの使用5、cssスタイル構成6、terser-webpack-pluginを使用して、パッケージをクリアした後、consone.log出力をクリアします.ローカル開発時に、コンソール出力7、内部導入ファイルをキャンセルすることを忘れないように調整します.指定フィールドの別名を設定します.デフォルトのsrcは@などです.今は会社でvue.cli.4.xのプロジェクトvue.com fig.jsを設定しています.参考にして、コメントを書いています.

const path = require('path')
const resolve = (dir) => path.join(__dirname, dir)
const TerserPlugin = require('terser-webpack-plugin')

module.exports = {
     
  publicPath: '/', //          (  '/'),       (      )
  outputDir: 'dist', //                  (  ''dist''，        )
  assetsDir: 'static', //          (s、css、img、fonts) (    outputDir  )  (  '')
  indexPath: 'index.html', //       index.html      (    outputDir)          。
  // lintOnSave: true, //         lint  
  productionSourceMap: true, //          sourceMap   
  //         ，ip  、   
  devServer: {
     
    host: '0.0.0.0',
    port: 8088,
    https: false,
    hotOnly: false,
    hot: true, //        
    open: false, //         
    //     
    proxy: {
     
      //          '/api'       
      '/api': {
     
        target: 'http://localhost:9000/', //              ，      ，   
        changeOrigin: true, // needed for virtual hosted sites
        // ws: true, // proxy websockets
        // pathRewrite: {
     
        //   '^/api': ''
        // }
      },
    },
  },
  css: {
     
    extract: false, //                css     ExtractTextPlugin
    sourceMap: false, //    CSS source maps
    loaderOptions: {
     
      // css      ，   ，        
      /* //   sass-loader     
            sass: {
              // @/   src/    
              prependData: `@import "~@/views/About.scss";`
            } */
    },
  },
  configureWebpack: {
     
    optimization: {
     
      minimizer: [
        new TerserPlugin({
     
          //        console
          terserOptions: {
     
            ecma: undefined,
            warnings: false,
            parse: {
     },
            compress: {
     
              drop_console: true,
              drop_debugger: false,
              pure_funcs: ['console.log'], //   console
            },
          },
        }),
      ],
    },
  },
  //     ，        webpack-chain   ChainableConfig   。       webpack            。
  chainWebpack: (config) => {
     
    //     
    config.resolve.alias
      .set('@', resolve('src'))
      .set('assets', resolve('src/assets'))
      .set('components', resolve('src/components'))
      .set('utils', resolve('src/utils'))
      .set('api', resolve('src/api'))
  },
  //    Babel   TypeScript    thread-loader。        CPU             ，        。
  parallel: require('os').cpus().length > 1,
  //   PWA       。https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
  pwa: {
     },
  pluginOptions: {
     
    //        
    // ...
  },
}

以上は基本的な構成です.もしもっと多くの構成が必要なら、公式サイトにリンクしてください.https://cli.vuejs.org/zh/config/#vue-config-js
この文章の内容が皆さんの役に立つことを望みます.