**原文链接：https://www.jianshu.com/p/5e13bc2eb97c
文档：https://cli.vuejs.org/zh/guide/
条件：
npm 更至最新
node >=8.9
1.全局安装 npm install -g @vue/cli 或 yarn global add @vue/cli
2.查看版本/是否安装成功 vue -V
image.png
3.在新文件夹下创建项目 vue create my-project
image.png
指向的vuecli3是因为上一次记录过的cli3配置，第一次执行create是没有的
按键盘上下键可以选择默认（default）还是手动（Manually），如果选择default，一路回车执行下去就行了
继续手动一下
image.png
4.选择配置，看个人项目需求
注意，空格键是选中与取消，A键是全选
TypeScript 支持使用 TypeScript 书写源码
Progressive Web App (PWA) Support PWA 支持。
Router 支持 vue-router 。
Vuex 支持 vuex 。
CSS Pre-processors 支持 CSS 预处理器。
Linter / Formatter 支持代码风格检查和格式化。
Unit Testing 支持单元测试。
E2E Testing 支持 E2E 测试。
image.png
5.css的预处理，我选择的是stylus
image.png
6.我选择的是ESLint + Prettier
image.png
7.选择语法检查方式，我自己选择保存就检测
第一个是保存检测，第二个是fix和commit的时候检测
image.png
8.单元测试，我选择了Mocha
image.png
9.配置文件存放地方
第一个是独立文件夹位置，第二个是在package.json文件里
image.png
10.询问是否记录这一次的配置，以便下次使用，如一开始的时候会显示的vuecli3配置
image.png
11.回车确定等待下载
image.png
12.装好后，启动
cd my-project // 进入到项目根目录
npm run serve // 启动项目
image.png
image.png
13.3.0的目录比2.0简洁了很多，没了build和config等目录。若需要其他配�����则需要自己手动配置了呢
image.png
基本就酱紫啦~
如果你仍然需要使用旧版本的 vue init 功能，你可以全局安装一个桥接工具
npm install -g @vue/cli-init
vue init webpack my-project
image.png
初始化完成之后需要在项目根目录下新建一个 vue.config.js文件，用来设置自定义的配置信息
输入以下信息：
module.exports = {
publicPath: process.env.NODE_ENV === 'production' ? '/production-sub-path/' : '/',
// 如果想把开发服务器架设在根路径，可以使用一个条件式的值
// 构建输出目录（打包位置） 默认 dist
outputDir: 'dist',
// 静态资源目录
assetsDir: 'assets',
indexPath: 'index.html',
// 指定生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径。
// 静态资源文件名哈希值，用来避免缓存
filenameHashing: false,
// 默认 undefined
pages: { // 页面配置
index: {
// page 的入口 , 多个入口js时候可以用数据传入
entry: 'src/index/main.js',
// 模板来源
template: 'public/index.html',
// 在 dist/index.html 的输出
filename: 'index.html',
// 当使用 title 选项时，
// template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
title: 'Index Page',
// 在��个页面中包含的块，默认情况下会包含
// 提取出来的通用 chunk 和 vendor chunk。
chunks: ['chunk-vendors', 'chunk-common', 'index']
},
// 当使用只有入口的字符串格式时，
// 模板会被推导为 `public/subpage.html`
// 并且如果找不到的话，就回退到 `public/index.html`。
// 输出文件名会被推导为 `subpage.html`。
subpage: 'src/subpage/main.js'
},
lintOnSave: 'default', // 可选值 boolean | 'warning' | 'default' | 'error' 。默认default会把错误输出在浏览器上
// 设置为 true 或 'warning' 时，eslint-loader 会将 lint 错误输出为编译警告
// 设置为 error 将会使得 eslint-loader 把 lint 警告也输出为编译错误 编译失败
runtimeCompiler: false, // 设置为 true 后你就可以在 Vue 组件中使用 template 选项
transpileDependencies: [], // 默认情况下 babel-loader 编译会忽略所有 node_modules 中的文件。如果你想要通过 Babel 显式转译一个依赖，可以在这个选项中列出来
productionSourceMap: true, // 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建
crossorigin: undefined, // string,设置生成的 HTML 中 wp注入的 <link rel='stylesheet'> 和 <script> 标签的 crossorigin 属性。
integrity: false, // boolean ,在生成的 HTML 中的 wp注入的 <link rel='stylesheet'> 和 <script> 标签上启用 Subresource Integrity (SRI)。如果你构建后的文件是部署在 CDN 上的，启用该选项可以提供额外的安全性
configureWebpack: { // Object | Function, 对象会合并到最终配置中；函数可以直接修改配置，也可以返回新配置
name: '项目名字', // 项目重命名
plugins: [],
resolve: {
extensions: ['.js','.jsx','.json'], // 引入文件默认假的拓展名，即：没有拓展名时会尝试找这几种拓展名的文件
alias: { // 配置别名，在引入文件时候会匹配这里配置的名字对应的路径， 来把相应的 名字 替换 成路径
'@': path.resolve(__dirname, 'src'),
'@@': path.resolve(__dirname, 'src/view')
},
mainFiles: ['main.js', 'babel-propyfill.js'], // 配置查找 模块 时查找文件夹下的入口文件，默认是index.js,如果配置了，则会按照配置的文件名找入口
},
externals: { // 打包的时候， 默认第三方包会打包到chunk-vendors.js里，为了避免其过大，可以通过以下配置，排除这些包打到chunk-vendors.js里
'ant-design-vue': 'Ant',
'vuex': 'Vuex',
// 'msun-sheet': {
// amd: 'initSheet'
// }
'xlsx': 'XLSX',
'xlsx-style': 'XLSXStyle'
},
plugins: [
new webpack.optimize.LimitChunkCountPlugin({ // 配置打包的文件数量
// maxChunks: 6, // 限制最多几个文件
// minChunks: 2, // 最少几个文件
// minChunkSize: 300, // 最小的文件大小
maxChunkSize: 300 // 最大的文件大小
})
],
optimization:{
splitChunks:{ // 拆分打包的js文件
chunks: 'all', // 要处理的chunks类型。可选值all (chunks可以在异步和非异步chunk之间共享), async (异步chunk用) initial(同步)
minSize: 76072, // 允许拆出chunks块的最小体积 ，单位是byte 1 (Byte) = 1/ 128 k (因为1 Byte是一个字节，一个字节是8位bit) 131072基本就是 1M
minSizeReduction: 76072, // 生成 chunk 所需的主 chunk（bundle）的最小体积（以字节为单位）缩减。这意味着如果分割成一个 chunk 并没有减少主 chunk（bundle）的给定字节数，它将不会被分割，即使它满足 splitChunks.minSize。【不理解】
automaticNameDelimiter: '+', // 为文件命名的连接符
// chunks(chunk) {chunk.name !== 'exclude-chunks' } // 也可以提供一个函数，排除哪些chunks
maxAsyncRequests: 8, // 每个异步模块能被拆分的最大数量，文件数量
maxInitialRequests:8, // 每个入口和他的同步依赖，最多能被拆分的数量
enforceSizeThreshold: 150000, // 强制执行拆分的体积阙值， 达到阙值的文件会忽略其他限制，直接拆分
defaultSizeTypes: ['javascript', 'unknown'], // 设置大小使用数字时使用的大小类型【不理解啥意思】
minChunks: 1, // 拆分前被chunk公用的最小次数~~~拆分前必须共享模块的最小 chunks 数。
hidePathInfo: false, // 为由 maxSize 分割的部分创建名称时，阻止公开路径信息。
cacheGroups: { // 1. 缓存组。缓存组的优先级最高，同样的配置写在缓存组里的会优先使用；模块必须符合某个缓存组的所有条件，才会被分割；
chunks: 'all',
defaultVendors: {
test: /[\\/]node_modules[\\/]/, // 1.1 模块路径/文件名匹配正则 \\/ 是为了同时匹配window和linux系统的路径斜杠
priority: -10, // 1.2 缓存组权重;自定义组的默认值为0
reuseExistingChunk: true, // 1.3 如果当前 chunk 包含已从主 chunk 中拆分出的模块，那么缓存组不会在新 chunk 内生成这个/些模块，而是去复用被拆出的 module。这可能会影响 chunk 的结果文件名。
},
default: {
minChunks: 2, // 5. default 组的模块必须至少被 2 个 chunk 共用 (本次分割前)
priority: -20,
reuseExistingChunk: true,
},
react: { // 1. 正则匹配示例，把 react 和 react-dom 分到一个名为 `lib-react` 的 js 中
// `[\\/]` 是作为跨平台兼容性的路径分隔符
test: /[\\/]node_modules[\\/](vue|vuex|vue-dom)[\\/]/i,
name: 'lib-vue',
},
svgIcon: { // 2. 函数匹配示例，把自定义 svg 图标都拆出来，放到 `svgIcon.js` 中
test(module) {
// `module.resource` 是文件的绝对路径
// 用`path.sep` 代替 / or \，以便跨平台兼容
const path = require('path'); // path 一般会在配置文件引入，此处只是说明 path 的来源，实际并不用加上
return ( // 匹配 icon 文件夹下的 .svg 后缀文件
module.resource &&
module.resource.endsWith('.svg') &&
module.resource.includes(`${path.sep}icons${path.sep}`)
);
},
name: 'svgIcon'
},
}
}
}
},
devServer: { // 所有 webpack-dev-server 的选项都支持
port: 8080, // 端口号
open: false, // 自动打开
overlay: { // 要显示浮窗信息
warnings: false,
errors: true
},
proxy: {
'/api': {
target: 'http://api.twobyoung.com', //API服务器的地址
ws: true, //代理websockets
changeOrigin: true, // 是否跨域，虚拟的站点需要更管origin
pathRewrite: {
// '^/api5'是一个正则表达式，表示要匹配请求的url中，全部'http://localhost:8081/api5' 转接为 http://localhost:8081/api/
'^/api5': '/api',
//重写路径 比如'/api/aaa/ccc'重写为'/aaa/ccc'
'^/api': '',
}
},
'/foo': {
target: 'http://www.twobyoung.com'
}
}
},
// configureWebpack: config => {},
// 函数形式，已有的webpack配置会作为参数传入。【操作形式是对象的形式，既直接修改对象值】。可以进行操作
// 该对象将会被 webpack-merge 合并入最终的 webpack 配置
chainWebpack: config => {},
// function，允许对内部的 webpack 配置进行更细粒度的修改。【修改形式是链式调用形式】
// Vue CLI 内部的 webpack 配置是通过 webpack-chain 维护的。这个库提供了一个 webpack 原始配置的上层抽象，使其可以定义具名的 loader 规则和具名插件，并有机会在后期进入这些规则并对它们的选项进行修改。
css: {
requireModuleExtension: true, // 默认true情况下，只有 *.module.[ext] 结尾的文件才会被视作 CSS Modules 模块。设置为 false 后你就可以去掉文件名中的 .module 并将所有的 *.(css|scss|sass|less|styl(us)?) 文件视为 CSS Modules 模块
extract: false, // boolean | Object,Default: 生产环境下是 true，开发环境下是 false.将组件中css提取城单独文件
sourceMap: false, // 是否为 CSS 开启 source map,开启时性能影响较大
loaderOptions: { // 默认{}， 向 CSS 相关的 loader 传递选项
stylus: {
'resolve url': true,
'import': [
'./src/theme'
]
}
}
},
parallel: require('os').cpus().length > 1, // 是否为 Babel 或 TypeScript 使用 thread-loader。该选项在系统的 CPU 有多于一个内核时自动启用���仅作用于生产构建。
pwa: {}, // 向 PWA 插件传递选项
pluginOptions: { // 用来传递任何第三方插件选项
'cube-ui': {
postCompile: true,
theme: true
}
}
}
您还可以通过将以下文件放在项目根目录中来指定env变量：
.env ＃在所有情况下加载
.env.local ＃在所有情况下加载，通过GIT中忽略
.env.[model] ＃仅装入指定的模式
.env.[model].local ＃仅装入指定的模式，通过GIT中忽略
env文件只包含环境变量的键=值对：
[图片上传失败...(image-1aa115-1700700476523)]
