步驟

• 第一步：安裝Vue CLI的腳手架；（如安裝，則跳過此步驟）

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

• 第二步：創(chuàng)建一個項目A

vue create A

• 第三步：代碼合并
  1、 將需要升級的項目(本文中縮寫為：B)的webpack配置相關(guān)的代碼 刪除；主要是文件夾： config、 build

  2、將A中的pubic復制B；將B的 static文件夾移入到public下;
  此步驟直接將整個static移入到public下的好處是：無需修改引用了static下資源的文件。
  如：

  
  另外：需要對應在vue.config.js配置：assetsDir

  assetsDir: 'static'

3、對比A、B的package.json，yarn install。

運行項目，你可能就會遇到下面的問題。

You are using the runtime-only build of Vue......

module.exports ={
   configureWebpack: {
    resolve: {
      alias: {
        'vue$': 'vue/dist/vue.esm.js' 
      },
    }
  },
}

Uncaught TypeError: Cannot redefine property: $router

解決方案參考地址：https://www.cnblogs.com/mengyouyouyou/p/10936171.html

eslint報錯

1.簡單粗暴：關(guān)閉eslint

// vue.config.js
module.exports ={
  lintOnSave:false
}

2.配置eslint，修復eslint報錯

• .eslintignore
• .eslintrc.js/或則在package.json的eslintConfig配置

module.exports = {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "standard"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },

依賴警告

安裝依賴包時，出現(xiàn)如下warning

[plugin] has has unmet peer dependency "webpack@^2.0.0 || ^3.0.0 || ^4.0.0".

解決方案:安裝webpack即可。

yarn add webpack --dev

https://nodejs.org/es/blog/npm/peer-dependencies/

alias/extental

通過configureWebpack字段配置

module.exports ={
   configureWebpack: {
    resolve: {
      alias: {
        'vue$': 'vue/dist/vue.esm.js',
        '@': path.join(__dirname, 'src')
      },
    },
    externals: [
      {
        'vue': 'Vue'
      }],
  },
}

PostCss

** Vue CLI 內(nèi)部使用了 PostCSS.**；可以通過以下幾種方式配置postcss

• postcss.config.js
• . postcssrc
• vue.config.js的css.loaderOptions.postcss

//  postcss.config.js
module.exports = {
  parser: 'sugarss',
  plugins: {
    'postcss-import': {},
    'postcss-preset-env': {},
    'cssnano': {}
  }
}

• 默認開啟了 autoprefixer。如果要配置目標瀏覽器，可使用 package.json 的 browserslist 字段。

sass 共享全局變量

通過vue.config.js的css.loaderOptions選項

module.exports ={
  // 給 sass-loader 傳遞選項
      sass: {
        // @/ 是 src/ 的別名
        // 所以這里假設你有 `src/variables.sass` 這個文件
        // 注意：在 sass-loader v7 中，這個選項名是 "data"
        prependData: `@import "~@/variables.sass"`
      },
      // 默認情況下 `sass` 選項會同時對 `sass` 和 `scss` 語法同時生效
      // 因為 `scss` 語法在內(nèi)部也是由 sass-loader 處理的
      // 但是在配置 `data` 選項的時候
      // `scss` 語法會要求語句結(jié)尾必須有分號，`sass` 則要求必須沒有分號
      // 在這種情況下，我們可以使用 `scss` 選項，對 `scss` 語法進行單獨配置
      scss: {
        prependData: `@import "~@/variables.scss";`
      }
}

生產(chǎn)環(huán)境剔除console.log

• 安裝babel-plugin-transform-remove-console

yarn add babel-plugin-transform-remove-console --dev

• babel.config.js添加如下代碼(如果沒有，則在項目根目錄下新建一個)

const isProduction = process.env.NODE_ENV === 'production';
const plugins = [];
if (isProduction) {
  plugins.push(['transform-remove-console', {"exclude": ["error", "warn"]}])
}
module.exports = {
  plugins: plugins
}

打包文件上CND的路徑配置

使用vue.config.js的publicPath

// vue.config.js
{
 module.exports ={
      publicPath: process.env.NODE_ENV === 'production' ? '//static.test.zhuzi.me/editor/' : '/',
  } 
}

webpack Analyzer

無需安裝webpack-bundle-analyzer依賴，只需要打包時通過vue-cli-service build --report即可。

打包時，mini-css-extract-plugin Conflicting order 警告

解決方案參考地址：(https://blog.csdn.net/peade/article/details/84890399)

擴展

配置多頁面應用

使用pages字段,配置如下

module.exports = {
  pages: {
    index: {
      entry: 'src/core/app/index.js',
      template: 'src/core/app/index.html',
      filename: 'index.html',
    },
    editor: {
      entry: 'src/core/editor/editor.js',
      template: 'src/core/editor/editor.html',
      filename: 'editor.html',
    }
  },
}

審查項目的 webpack 配置

因為 @vue/cli-service 對 webpack 配置進行了抽象，所以理解配置中包含的東西會比較困難。vue-cli-service暴露了inspect 來審查一個 Vue CLI 項目的 webpack config

vue-cli-service inspect > output.js

更多配置，請查看Vue Cli官方文檔