@vue/cli 4.0.5 學習記錄

1. Vue CLI (@vue/cli) 是一個全局安裝的 npm 包，提供了終端里的 vue 命令。Vue CLI 插件的名字以 @vue/cli-plugin- (內建插件) 或 vue-cli-plugin- (社區插件) 開頭，非常容易使用，如@vue/cli-plugin-babel.

安裝vue-cli

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

你還可以用這個命令來檢查其版本是否正確：

vue --version

如果要進行快速原型開發（一般用得不多），需安裝擴展

npm install -g @vue/cli-service-global

創建項目

vue create 項目名稱

選擇手動配置（如果喜歡使用eslint可以選擇默認）

鍵盤上下鍵即可切換。

創建完成后，package.json中的一部分如下：

因此，啟動代碼為

npm run serve

2. 目前整體的目錄結構如圖：

1. node_modules：下載的依賴包
2. public：公共的基礎文件
3. src：項目主體部分　

1. • api：請求接口統一管控，當需要更改接口時能更快的找到
   • assets：項目中所需引入資源的文件，font/img/js/...
   • components：當有重復的組件時，提取出來，放在此文件夾
   • config：存放一些配置文件
   • directive：自定義指令文件
   • lib：存放一些公用的方法
   • mock：個人認為比較重要的文件，當前后端統一定義好接口時，mock可極大的提高開發效率，這也是最近討論比較多的面向接口開發
   • router：路由文件
   • store：數據管控文件
   • views：頁面文件
   • app.vue：vue入口文件
   • main.js：項目主js文件

4. .browserslistrc：指定了項目的目標瀏覽器的范圍。這個值會被 @babel/preset-env 和 Autoprefixer 用來確定需要轉譯的 JavaScript 特性和需要添加的 CSS 瀏覽器前綴
5. .editorconfig：編輯器配置文件，需要vscode下載editorconfig for vs code插件使用
6. .eslintrc.js：eslint配置文件
7. .gitignore：上傳到git時忽略的文件
8. .babel.config.js：babel轉義配置文件
9. package-lock.json：鎖定安裝時的包的版本號，並且需要上傳到git，以保證其他人在npm install時大家的依賴能保證一致
10. package.json：項目依賴的部分
11. postcss.config.js：postcss配置項
12. REACME.md：項目的說明書
13. vue.config.js：項目的主要配置文件（如果沒有，自己手動建立一個，它會被@vue/cli-service 自動加載）

3. vue.config.js配置

const path = require('path')

const resolve = dir => path.join(__dirname, dir)

const BASE_URL = process.env.NODE_ENV === 'production' ? '/pro/' : '/'

module.exports = {
  lintOnSave: false,
  chainWebpack: config => {
    config.resolve.alias
      .set('@', resolve('src'))
      .set('_c', resolve('src/components'))
  },
  productionSourceMap: false, // 打包時不生成.map文件
  devServer: {
    proxy: 'http://localhost:8080'
  }
}

3.1 配置代理（跨域）

如果你的前端應用和后端 API 服務器沒有運行在同一個主機上，你需要在開發環境（dev）下將 API 請求代理到 API 服務器。這個問題可以通過 vue.config.js 中的 devServer.proxy 選項來配置。

devServer: {
    proxy: 'http://localhost:3000' // 告訴開發服務器將任何未知請求 (沒有匹配到靜態文件的請求) 代理到http://localhost:3000
}

 

如果想要配置更多的代理控制行為，也可以使用一個 path: options 成對的對象，詳見vue-config-js

vue-cli3.0的代理配置，直接將vue-cli 2.x 中proxyTable的配置copy到devServer.proxy中。

vue-cli 2.x

vue-cli 3.0或vue-cli 4.0

module.exports = {
  devServer: {
    proxy: {
     '/hrm/api': {
        // target: 'http://localhost:3000/', // Dev環境
        //  target: 'http://192.168.1.238:10751/', // Test環境
        // target: 'http://192.168.1.215:10751/', // Rls環境
        target: 'http://192.168.1.218:10751/', // 正式環境
        changeOrigin: true, // 跨域
        autoRewrite: true,  
        cookieDomainRewrite: true,
        pathRewrite: {
          '^/hrm/api/': '/'                 // 所有以 '/hrm/api/' 開頭的api都替換為'/'
        }
      }
    }
  }
}

 

所有webpack dev-Server的選項都支持.注意：

• 有些值像host、port和https可能會被命令行參數覆寫
• 有些像publicPath和historyApiFallback不應該被修改，因為它們需要和開發服務器的baseUrl同步以保障正常工作

3.2 配置Webpack其他選項
調整webpack配置最簡單的方式就是在 vue.config.js中的 configureWebpack選項提供一個對象：

module.exports = {
  // 其他選項...
  configureWebpack: {
    plugins: [
      new MyAwesomeWebpackPlugin()
      //......
    ]
  }
}

警告

在vue.config.js 中修改 outputDir 選項，而不是修改 output.path；
修改 vue.config.js 中的 baseUrl 選項，而不是修改 output.publicPath。

　　

參考：https://www.jianshu.com/p/912dc2a9e485

https://www.jianshu.com/p/6307c568832d