使用vue-cli3已经有相当一段时间了，一直没怎么去注意其中的配置，所以趁着这段时间总结下应用过程中的一些经验，本文是从安装到开发使用的一个过程讲解，也可以说是新手向的文章，文字有点多，请耐心观看。
（一）安装：
1、下载安装node: 登陆node官网并选择自己合适的node版本进行安装；
2、安装vue-cli脚手架工具
npm install -g @vue/cli # OR # 推荐使用 npm install -g yarn # 如果已有安装，此步骤不需要 yarn global add @vue/cli
（二）创建一个项目：
vue create my-project # OR vue ui 选择合适的配置 # 版本信息 Vue CLI v3.7.0 ? Please pick a preset: # 基础配置 vue-cli3-demo (vue-router, vuex, sass, babel, typescript, unit-mocha) default (babel, eslint) # 自定义配置，这里我们选择自定义选项，点击回车 > Manually select features
选择需要的插件及编译工具
? Check the features needed for your project: # 代码转换，可以让你更好的书写前沿技术 (*) Babel # JavaScript 的一个超集，好东西用起来 (*) TypeScript # PWA支持,不要求使用可以不选 ( ) Progressive Web App (PWA) Support (*) Router (*) Vuex # css预编译器 (*) CSS Pre-processors # 代码格式化 (*) Linter / Formatter # 书写单元测试用的，不要求使用可以不选 >(*) Unit Testing ( ) E2E Testing
接下来的配置选项
# 是否使用class风格进行组件开发 ? Use class-style component syntax? Yes # 使用 babel 对 TypeScript 代码进行编译转换 ? Use Babel alongside TypeScript for auto-detected polyfills? Yes ? Use history mode for router? (Requires proper server setup for index fallback in production) Yes # 选择css预编译，这里我们选择Sass/SCSS ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass) # 选择代码格式化配置 ? Pick a linter / formatter config: Standard # 代码检查方式 ? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)Lint on save # 选择单元测试工具 ? Pick a unit testing solution: Mocha # 是否将配置放在单独的文件中 ? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files # 是否将此次配置保存 ? Save this as a preset for future projects? No
最后
cd my-project npm run install npm run serve # OR 推荐使用 yarn install yarn serve
（三）目录结构
（四）环境变量配置
环境变量说明
.env # 在所有的环境中被载入
.env.local # 在所有的环境中被载入，但会被 git 忽略
.env.[mode] # 只在指定的模式中被载入
.env.[mode].local # 只在指定的模式中被载入，但会被 git 忽略
新建环境变量 .env.development.text 用于测试环境 并添加如下代码
NODE_ENV='development' VUE_APP_URL='你的测试环境域名'
只有以 VUE_APP_ 开头的变量会被 webpack.DefinePlugin 静态嵌入到客户端侧的包中。你可以在应用的代码中这样访问它们：
console.log(process.env.VUE_APP_URL)
修改 package.json ,并在 scripts 里面添加如下代码
"serve:test": "vue-cli-service serve --mode development.test",
（五）添加配置文件 vue.config.js
vue.config.js 是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。你也可以使用 package.json 中的 vue 字段，但是注意这种写法需要你严格遵照 JSON 的格式来写。
// vue.config.js module.exports = { // baseUrl从 Vue CLI 3.3 起已弃用，请使用publicPath。 // baseUrl:'./', // 配置sub-path后访问路径为https://xxx-path/sub-path/#/ publicPath: process.env.NODE_ENV === 'production' ? '/sub-path/' : 'https://www.jb51.net/', // 输出文件路径，默认为dist outputDir: 'dist', // 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。 assetsDir: '', // 指定生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径 indexPath: '', // 配置多页应用 pages: { index: { // page 的入口 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: true, // 保存时 lint 代码 // css相关配置 css: { // 是否使用css分离插件 ExtractTextPlugin extract: true, // 开启 CSS source maps? sourceMap: false, // css预设器配置项 loaderOptions: { // pass options to sass-loader sass: { // 自动注入全局变量样式 data: ` @import "src/你的全局scss文件路径"; ` } }, // 启用 CSS modules for all css / pre-processor files. modules: false, }, // 生产环境是否生成 sourceMap 文件 productionSourceMap: false, //是否为 Babel 或 TypeScript 使用 thread-loader。该选项在系统的 CPU 有多于一个内核时自动启用，仅作用于生产构建。 parallel: require('os').cpus().length > 1, // 所有 webpack-dev-server 的选项都支持 devServer: { port: 8080, // 配置端口 open: true, // 自动开启浏览器 compress: true, // 开启压缩 // 设置让浏览器 overlay 同时显示警告和错误 overlay: { warnings: true, errors: true }, // 设置请求代理 proxy: { '/api': { target: '<url>', ws: true, changeOrigin: true }, '/foo': { target: '<other_url>' } } }, }
（六）修改 webpack 配置信息
vue-cli3.0 的版本已经将 webpack 的配置整合进 vue.config.js 里面了