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:
# 基礎(chǔ)配置
 vue-cli3-demo (vue-router, vuex, sass, babel, typescript, unit-mocha)
 default (babel, eslint)
# 自定義配置，這里我們選擇自定義選項(xiàng)，點(diǎn)擊回車
> Manually select features

? Check the features needed for your project:
# 代碼轉(zhuǎn)換，可以讓你更好的書寫前沿技術(shù)
 (*) Babel
# JavaScript 的一個(gè)超集，好東西用起來(lái)
 (*) TypeScript
# PWA支持,不要求使用可以不選
 ( ) Progressive Web App (PWA) Support
 (*) Router
 (*) Vuex
# css預(yù)編譯器
 (*) CSS Pre-processors
# 代碼格式化
 (*) Linter / Formatter
# 書寫單元測(cè)試用的，不要求使用可以不選
>(*) Unit Testing
 ( ) E2E Testing

# 是否使用class風(fēng)格進(jìn)行組件開發(fā)
? Use class-style component syntax? Yes
# 使用 babel 對(duì) TypeScript 代碼進(jìn)行編譯轉(zhuǎn)換
? 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預(yù)編譯，這里我們選擇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
# 選擇單元測(cè)試工具
? Pick a unit testing solution: Mocha
# 是否將配置放在單獨(dú)的文件中
? 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

NODE_ENV='development'
VUE_APP_URL='你的測(cè)試環(huán)境域名'

// vue.config.js
module.exports = {
 // baseUrl從 Vue CLI 3.3 起已棄用，請(qǐng)使用publicPath。
 // baseUrl:'./', 
 // 配置sub-path后訪問路徑為https://xxx-path/sub-path/#/
 publicPath: process.env.NODE_ENV === 'production' ? '/sub-path/' : '/',
 // 輸出文件路徑，默認(rèn)為dist
 outputDir: 'dist', 
 // 放置生成的靜態(tài)資源 (js、css、img、fonts) 的 (相對(duì)于 outputDir 的) 目錄。
 assetsDir: '', 
 // 指定生成的 index.html 的輸出路徑 (相對(duì)于 outputDir)。也可以是一個(gè)絕對(duì)路徑
 indexPath: '',
 // 配置多頁(yè)應(yīng)用
 pages: {
 index: {
  // page 的入口
  entry: 'src/index/main.js',
  // 模板來(lái)源
  template: 'public/index.html',
  // 在 dist/index.html 的輸出
  filename: 'index.html',
  // 當(dāng)使用 title 選項(xiàng)時(shí)，
  // template 中的 title 標(biāo)簽需要是 <title><%= htmlWebpackPlugin.options.title %></title>
  title: 'Index Page',
  // 在這個(gè)頁(yè)面中包含的塊，默認(rèn)情況下會(huì)包含
  // 提取出來(lái)的通用 chunk 和 vendor chunk。
  chunks: ['chunk-vendors', 'chunk-common', 'index']
 },
 // 當(dāng)使用只有入口的字符串格式時(shí)，
 // 模板會(huì)被推導(dǎo)為 `public/subpage.html`
 // 并且如果找不到的話，就回退到 `public/index.html`。
 // 輸出文件名會(huì)被推導(dǎo)為 `subpage.html`。
 subpage: 'src/subpage/main.js',
 },
 lintOnSave: true, // 保存時(shí) lint 代碼
 // css相關(guān)配置
 css: {
 // 是否使用css分離插件 ExtractTextPlugin
 extract: true,
 // 開啟 CSS source maps?
 sourceMap: false,
 // css預(yù)設(shè)器配置項(xiàng)
 loaderOptions: {
  // pass options to sass-loader
  sass: {
  // 自動(dòng)注入全局變量樣式
  data: `
   @import "src/你的全局scss文件路徑";
  `
  }
 },
 // 啟用 CSS modules for all css / pre-processor files.
 modules: false,
 },
 // 生產(chǎn)環(huán)境是否生成 sourceMap 文件
 productionSourceMap: false,
 //是否為 Babel 或 TypeScript 使用 thread-loader。該選項(xiàng)在系統(tǒng)的 CPU 有多于一個(gè)內(nèi)核時(shí)自動(dòng)啟用，僅作用于生產(chǎn)構(gòu)建。
 parallel: require('os').cpus().length > 1,
 // 所有 webpack-dev-server 的選項(xiàng)都支持
 devServer: {
 port: 8080, // 配置端口
 open: true, // 自動(dòng)開啟瀏覽器
 compress: true, // 開啟壓縮
 // 設(shè)置讓瀏覽器 overlay 同時(shí)顯示警告和錯(cuò)誤
 overlay: {
  warnings: true,
  errors: true
 },
 // 設(shè)置請(qǐng)求代理
 proxy: {
  '/api': {
  target: '<url>',
  ws: true,
  changeOrigin: true
  },
  '/foo': {
  target: '<other_url>'
  }
 }
 },
}

// 安裝 babel-polyfill
// npm install babel-polyfill 或者 yarn add babel-polyfill
// 安裝 uglifyjs-webpack-plugin
// npm install uglifyjs-webpack-plugin -D 或者 yarn add uglifyjs-webpack-plugin -D

// vue.config.js
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const isProduction = process.env.NODE_ENV === 'production';

module.exports = {
 chainWebpack: config => {
 // 引入babel-polyfill
 config
  .entry('index')
  .add('babel-polyfill')
  .end();
 // 添加文件路徑別名
 config.resolve.alias.set("@", resolve("src"));
 if (isProduction) {
  // 生產(chǎn)環(huán)境注入cdn
  config.plugin('html')
  .tap(args => {
   args[0].cdn = cdn;
   return args;
  });
 }
 },
 configureWebpack: config => {
 if (isProduction) {
  // 為生產(chǎn)環(huán)境修改配置...
  config.plugins.push(
  //添加代碼壓縮工具，及設(shè)置生產(chǎn)環(huán)境自動(dòng)刪除console
  new UglifyJsPlugin({
   uglifyOptions: {
   compress: {
    warnings: false,
    drop_debugger: true,
    drop_console: true,
   },
   },
   sourceMap: false,
   parallel: true,
  })
  );
 } else {
  // 為開發(fā)環(huán)境修改配置...
 }
 },
}

// vue.config.js
const isProduction = process.env.NODE_ENV === 'production';
const cdn = {
 css: [],
 js: [
 'https://xxx-cdn-path/vue.runtime.min.js',
 'https://xxx-cdn-path/vue-router.min.js',
 'https://xxx-cdn-path/vuex.min.js',
 'https://xxx-cdn-path/axios.min.js',
 ]
}

module.exports = {
 configureWebpack: config => {
 if (isProduction) {
  // 用cdn方式引入,分離第三方插件
  config.externals = {
  'vue': 'Vue',
  'vuex': 'Vuex',
  'vue-router': 'VueRouter',
  'axios': 'axios'
  }
 } else {
  // 為開發(fā)環(huán)境修改配置...
 }
 },
}

<!DOCTYPE html>
<html lang="zh">
<head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width,initial-scale=1.0">
 <link rel="icon" href="<%= BASE_URL %>static/favicon.ico" type="image/x-icon" />
 <link rel="shortcut icon" href="<%= BASE_URL %>static/favicon.ico" type="image/x-icon" />
 <title>my-project</title>
 <!-- 使用CDN的CSS文件 -->
 <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.css) { %>
 <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="preload" as="style">
 <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="stylesheet">
 <% } %>
 <!-- 使用CDN的JS文件 -->
 <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %>
 <link href="<%= htmlWebpackPlugin.options.cdn.js[i] %>" rel="preload" as="script">
 <% } %>
</head>
<body>
 <noscript>
 <strong>We're sorry but eye-admin doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
 </noscript>
 <div id="app"></div>
 <!-- built files will be auto injected -->
 <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %>
 <script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
 <% } %>
</body>
</html>

// vue.config.js
module.exports = {
 chainWebpack: config => {
 // 移除 prefetch 插件
 config.plugins.delete('preload');
 config.plugins.delete('prefetch');
 }
}