@vue/cli 3 安装搭建及 webpack 配置

  @vue/cli  是一个基于 Vue.js 进行快速开发的完整系统。

 @vue/cli   基于node服务  需要8.9以上版本 可以使用 nvm等工具来控制node版本  构建于 webpack 和 webpack-dev-server 之上 

 安装  

如果已安装旧版 需要先卸载旧版本 :  

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

任一命令安装全局新包:

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

查看版本:

vue --version
//or
vue -V

创建项目:

vue create  my-project # 项目名
# Windows 上通过 minTTY 使用 Git Bash，交互提示符并不工作。  
# 你必须通过   winpty vue.cmd create hello-world   启动这个命令。

# or
npx @vue/cli create appname

创建时会提示  preset 预置项

可以选择默认配置

也可以选择手动配置

Please pick a preset: 
> vue-router base (vue-router, vuex, less, babel, pwa, unit-mocha)  //配置过的预置项(preset)

default (babel, eslint) Manually select features //默认的preset
Manually select features //手动配置需要的preset

在操作提示的最后你可以选择将已选项保存为一个将来可复用的 preset。

同时 现在可以可视化创建项目:

vue ui

命令会打开一个浏览器窗口，并以图形化界面将你引导至项目创建的流程。

webpack 配置

在项目根目录手动创建 vue.config.js

导出一个对象 :

module.exports = {
  
}

有些webpack 选项不能直接修改

比如 应该修改 vue.config.js 中的 outputDir 而不是修改 webpack 中的 output.path

 基于环境有条件地配置行为，或者想要直接修改配置:

 baseUrl 从Vue CLI 3.3 起已弃用，请使用publicPath。

const path = require('path')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const ProxyAgent = require('proxy-agent')
const resolve = dir => path.resolve(__dirname, dir)
module.exports = {
  outputDir: process.env.outputDir || 'dist', // 'dist', 生产环境构建文件的目录
  runtimeCompiler: true,
  assetsDir: 'static',
  productionSourceMap: false, // 生产环境的 source map
  parallel: require('os').cpus().length > 1,
  configureWebpack: config => {
    // 公共配置
    // cdn引用时配置externals 防止将某些 import 的包(package)打包到 bundle 中，而是在运行时(runtime)再去从外部获取这些扩展依赖
    config.externals = {
      'vue': 'Vue',
      'vue-router': 'VueRouter',
      'element-ui': 'ELEMENT',
      'vuex': 'Vuex',
      'axios': 'axios'
    }
    config.resolve.alias = Object.assign({}, config.resolve.alias, {
      'src': resolve('src/common'),
      'common': resolve('src/views/common'),
      'static': resolve('static')
    })
    if (process.env.NODE_ENV === 'production') {
      // 为生产环境修改配置...
      config.optimization = {
        minimizer: [
          new UglifyJsPlugin({
            uglifyOptions: {
              compress: {
                drop_console: true, // console
                drop_debugger: false,
                pure_funcs: ['console.log']// 移除console
              }
            }
          })
        ]
      }
    } else {
      // 为开发环境修改配置...
    }
  },
  css: {
    loaderOptions: {
      css: {
        importLoaders: 1 // @import 引入的文件可被一个loader处理 （2 可被两个loader处理）
      }
    }
  },
  devServer: {
    port: 80,
    disableHostCheck: true, // 可使用本地host配置的域名访问
    proxy: {
      '/api': {
        agent: new ProxyAgent('http://132.128.11.12'),
        target: 'http://132.128.11.12',
        ws: false,
        changeOrigin: true
      }
    }

  }
}

链式操作

@vue/cli  内部的webpack 配置是通过 webpack-chain 维护的。

配置选项:

module.exports = {
    baseUrl: '/',
    outputDir: 'dist', //打包输出目录默认dist
   // assetsDir: 'bbbbb', //放置生成的静态资源 默认 ''
    chainWebpack: config => { //会接收一个基于 webpack-chain 的 ChainableConfig 实例。允许对内部的 webpack 配置进行更细粒度的修改。 
       config.resolve.alias.set('~',path.join(__dirname, '..','src/assets')) 
　　　　　　},

   
}

更多细节可查阅 vue.config.js 

 Owen 的个人博客