vueCli 3およびvueCli 4 vueプロジェクトの作成

プロジェクトプロセスの作成
1.古いバージョンを最初にアンインストール

// npm
npm uninstall vue-cli -g 
// yarn
yarn global remove vue-cli

2.nodeバージョンの更新には8.9以上が必要
3.vue/cli 3のインストール

// npm 
npm install -g @vue/cli 
// yarn
yarn global add @vue/cli

4.バージョンの表示

vue --version 

5.プロジェクトの作成(vue-cli 3はファイル名で、必要に応じて自分で作成できます)

vue create vue-cli3 

6.プロジェクトの開始

// npm
npm run serve
// yarn
yarn serve

7.梱包

// npm
npm run build 
// yarn
yarn build 

カスタム構成

//        vue.config.js   

//      
module.exports = {
    //          URL
    publicPath: process.env.NODE_ENV === 'production' ? '/test/' : './',
    //    vue-cli-service build                
    outputDir: 'dist',
    //          (js、css、img、fonts)   (    outputDir  )   
    assetsDir: 'assets',
    // eslint-loader              @vue/cli-plugin-eslint  
    lintOnSave: true,
    //              Vue     。  true        template
    runtimeCompiler: true,
    //          sourceMap    sourceMap         
    productionSourceMap: true,
    configureWebpack: config => {
        if (process.env.NODE_ENV === 'production') {
            //          ...
        } else {
            //          ...
        }
    },
    // css    
    css: {
        //     css     ExtractTextPlugin       true,      false
        extract: true,
        //    CSS source maps?
        sourceMap: false,
        // css      
        loaderOptions: {},
        //    CSS modules for all css / pre-processor files.
        modules: false
    },
    // webpack-dev-server     
    devServer: { //     
        hot: true, //   
        host: '0.0.0.0', //ip  
        port: 8085, //  
        https: false, //false  https，true   
        open: true, //       
        proxy: {
            '/api': { //   
                target: 'xxx',
                //       websockets
                ws: true,
                changeOrigin: true
            },
            '/test': { //  
                target: 'xxx'
            },
            '/pre': { //   
                target: 'xxx'
            },
            '/pro': { //  
                target: 'xxx'
            }
        }
    },
    pluginOptions: { //        
        // ...
    }
}