Vue cli 3の構成vue.config.js

最近、vue cli 3のバージョンがインストールされ、vue cli 2に比べてファイルディレクトリの構成が少なくなり、buildやconfigディレクトリがなくなりました.では、vue cli 2以前のポート番号の構成、パッケージ後のパスの構成、画像の構成など、どこで構成すればいいのでしょうか.vue cli 3はプロジェクトルートディレクトリに新しいvueを作成することができます.config.jsファイルは、これまでの多くの煩雑な構成のように、このファイルで構成することができます.公式にはそう言われています.vue.config.jsはオプションのプロファイルです.プロジェクトのルートディレクトリ(package.jsonと同じ)にこのファイルが存在する場合、@vue/cli-serviceによって自動的にロードされます.パッケージも使えますjsonのvueフィールドですが、この書き方はJSONのフォーマットに厳格に従う必要があります.自分でいくつかの収集を探して、整理しました.
vue-cli 3のソース部分:@vue/cli-service/lib/util/resolveClientEnv.js

module.exports = function resolveClientEnv (options, raw) {
  const env = {}
  Object.keys(process.env).forEach(key => {
    if (prefixRE.test(key) || key === 'NODE_ENV') {
      env[key] = process.env[key]
    }
  })
  env.BASE_URL = options.baseUrl
 
  if (raw) {
    return env
  }
 
  for (const key in env) {
    env[key] = JSON.stringify(env[key])
  }
  return {
    'process.env': env
  }

コア:env.BASE_URL = options.baseUrl;
プロジェクトのルートディレクトリにvueを作成します.config.jsファイル、baseUrl構成、インタフェースエージェント、その他の構成を行うことができます.

// vue.config.js     
//  vue.config.js      https://cli.vuejs.org/zh/config/#css-loaderoptions
//        ，        
const path = require('path')
const debug = process.env.NODE_ENV !== 'production'
module.exports = {
    //              URL。
    //      ，Vue CLI                      
    //   https://www.my-app.com/。              ，                。  ，           https://www.my-app.com/my-app/，    baseUrl   /my-app/。
    //baseUrl   Vue CLI 3.3     ，   publicPath
    //baseUrl: process.env.NODE_ENV === "production" ? "./" : "/",
    publicPath: process.env.NODE_ENV === "production" ? "./" : "/",

    // outputDir:  npm run build   yarn build   ，         （  baseUrl         ）
    outputDir: "./dist",
    //            (js、css、img、fonts)  ；（      ，             ）
    // assetsDir: "assets",
    //      index.html        (    ，       index.html    )
    indexPath: "./dist/index.html",
    //     ，                   hash          。             false         。(false               )
    filenameHashing: false,

    // lintOnSave：{ type:Boolean default:true }       eslint
    lintOnSave: true,

    /** 
     *          sourceMap   
     *             source map，        false          。
     * */
    productionSourceMap: false,
    chainWebpack: (config) => {
        if (debug) { //       
            config.devtool = 'cheap-module-eval-source-map'
        } else { //       
            config.devtool = '#source-map'
        }
        //            
        config.resolve.alias
            .set('@', path.resolve(__dirname, './src'))
            .set('@views', path.resolve(__dirname, './src/views'))
            .set('@components', path.resolve(__dirname, './src/components'))
            .set('@assets', path.resolve(__dirname, './src/assets'))
    },
    //   chainWebpack    
    // configureWebpack: (config) => {
    // Object.assign(config, { //         ,     
    //     resolve: {
    //         extensions: ['.js', '.json', '.vue'],
    //         alias: {
    //             '@': path.resolve(__dirname, './src') //      
    //             // '@views': path.resolve(__dirname, './src/views'),
    //             // '@components': path.resolve(__dirname, './src/components'),
    //             // '@assets': path.resolve(__dirname, './src/assets')
    //         }
    //     }
    // })
    // },

    //    webPack-dev-server     
    devServer: {
        host: "0.0.0.0", //      ，  localhost,  0.0.0.0         
        port: 8080, //    
        https: false, //          
        open: true, //         
        hot: true, //      
        hotOnly: false,
        // proxy: 'http://localhost:4000' //       ,      

        //       
        // proxy: {
        //     "/api": {
        //         target: "",//         
        //         ws: true,//     websockets
        //         changeOrigin: true, //    ：             ，         ，          ，                        
        //         pathRewrite: {
        //             '^/api': '' //      '/api'  target     ,      'http://40.00.100.100:3002/user/add'，   '/api/user/add'  
        //         }
        //     },
        //     "/foo": {
        //         target: ""
        //     }
        // }
    },
    /**
   *        
   */
    pluginOptions: {}
};