vue-cli3.0 升級記錄

lifefriend_007發表於2019-02-25
Vue

年三十時 vue2.6 釋出，向 3.0 看齊，說明 3.0 不遠了。作為開發者也應該為vue3.0 做點準備。首先是把 vue-cli 升級到 3.x ，在這記錄下 vue-cli2.x 升級 vue-cli3.x 中遇見（將來）遇見的問題。

1、安裝 vue-cli3.x

npm install -g @vue/cli
# OR
yarn global add @vue/cli
複製程式碼

如果希望還保留 vue-cli2.x 的語法或使用 2.x 的模板，建議安裝 cli-init

npm install -g @vue/cli-init
# OR
yarn global add @vue/cli-init
複製程式碼

2、使用 vue-cli3.x 建立專案

vue create hello-world 按照提示完成建立，新建的專案比 2.0 的檔案要少很多，刪除了與編譯相關的一些配置( 準確地說是在專案中刪除了，真正的配置還是有的，在 node_modules/@vue 目錄下 )。 src 目錄依然不變，static 目錄改成了 public。

vue-cli3.0 升級記錄

3、遇見問題及解決方案

(1) public 與 static

public 與 static 作用基本相同，但是在動態引用路徑上有區別，不能直接將 static 替換為 public 。如：'./static/config/conf.js' 替換為 './public/config/conf.js' 會報 404 錯誤，應改為 './config/conf.js' ，也就是 public 不要出現在路徑中。

(2) heap out of memory crash

vue-cli3.0 升級記錄

專案中如果引用了比較大的 js 檔案，在開發執行時就會出現這個錯誤，導致出現這個錯誤主要是外掛（plugin）記憶體管理不佳導，解決方法：在專案根目錄下新建檔案 .eslintignore ，把大檔案所在的路徑新增進去，如

public/
複製程式碼

(3) 編譯打包配置

如果希望對 webpack 等進行細緻化配置，可以在專案根目錄下新建檔案vue.config.js，具體配置可參考，下面是一份基本配置。

const path = require('path')

module.exports = {  
  // 部署應用包時的基本 URL,用法和 webpack 本身的 output.publicPath 一致
  publicPath: './',  
  // 輸出檔案目錄
  outputDir: 'dist',  
  // eslint-loader 是否在儲存的時候檢查
  lintOnSave: true,  
  // 是否使用包含執行時編譯器的 Vue 構建版本
  runtimeCompiler: false,  
  // 生產環境是否生成 sourceMap 檔案
  productionSourceMap: false,  
  // 生成的 HTML 中的 <link rel="stylesheet"> 和 <script> 標籤上啟用 Subresource Integrity (SRI)
  integrity: false,  
  // webpack相關配置
  chainWebpack: (config) => {
    config.resolve.alias
      .set('vue$', 'vue/dist/vue.esm.js')
      .set('@', path.resolve(__dirname, './src'))
  },
  configureWebpack: (config) => {    
  if (process.env.NODE_ENV === 'production') {      
      // 生產環境
      config.mode = 'production'
    } else {      
      // 開發環境
      config.mode = 'development'
    }
  },  
  // css相關配置
  css: {    
    // 是否分離css（外掛ExtractTextPlugin）
    extract: true,    
    // 是否開啟 CSS source maps
    sourceMap: false,   
    // css預設器配置項
    loaderOptions: {},    
    // 是否啟用 CSS modules for all css / pre-processor files.
    modules: false
  },  
  // 是否使用 thread-loader
  parallel: require('os').cpus().length > 1, 
  // PWA 外掛相關配置
  pwa: {}, 
  // webpack-dev-server 相關配置
  devServer: {
    open: true,
    host: 'localhost',
    port: 8080,
    https: false,
    hotOnly: false,   
    // http 代理配置
    proxy: {      
      '/api': {
        target: 'http://127.0.0.1:3000/api',
        changeOrigin: true,
        pathRewrite: {          
            '^/api': ''
        }
      }
    },
    before: (app) => {}
  }, 
  // 第三方外掛配置
  pluginOptions: {

  }
}
複製程式碼

相關文章