1.package.json

作用：
package.json 檔案其實就是對專案或者模組包的描述，裡面包含許多元資訊。比如專案名稱，專案版本，專案執行入口檔案，專案貢獻者等等。npm install 命令會根據這個檔案下載所有依賴模組。

檔案結構如下：

{
 "name": "sop-vue","version": "0.1.0","author": "zhangsan <[email protected]>","description": "sop-vue","keywords":["node.js","javascript"],"private": true,"bugs":{"url":"http://path/to/bug","email":"[email protected]"},"contributors":[{"name":"李四","email":"[email protected]"}],"repository": {
      "type": "git","url": "https://path/to/url"
   },"homepage": "http://github.com/style.css","license":"MIT","dependencies": {
 "bd-font-icons": "^1.1.3","core-js": "^3.6.4","echarts": "^4.7.0","element-ui": "^2.13.1","v-charts": "^1.19.0","vue": "^2.6.11","vue-router": "^3.1.6","vuex": "^3.1.3"
},"devDependencies": {
 "@vue/cli-plugin-babel": "^4.3.0","@vue/cli-plugin-eslint": "^4.3.0","@vue/cli-plugin-router": "^4.3.0","@vue/cli-plugin-unit-mocha": "^4.3.0","@vue/cli-plugin-vuex": "^4.3.0","@vue/cli-service": "^4.3.0","@vue/test-utils": "1.0.0-beta.31","babel-core": "^6.26.3","babel-eslint": "^10.1.0","babel-loader": "^7.1.5","babel-preset-env": "^1.7.0","chai": "^4.1.2","eslint": "^6.7.2","eslint-plugin-vue": "^6.2.2","sass": "^1.26.3","sass-loader": "^8.0.2","vue-template-compiler": "^2.6.11"
}
 "scripts": {
"serve": "vue-cli-service serve","build": "vue-cli-service build","test:unit": "vue-cli-service test:unit","lint": "vue-cli-service lint"
 },"bin": {
 "webpack": "./bin/webpack.js"
 },"main": "lib/webpack.js","module": "es/index.js","eslintConfig": {
 "extends": "vue-app"
 },"engines" : {
 "node" : ">=0.10.3 <0.12"
 },"browserslist": {
 "production": [
 ">0.2%","not dead","not op_mini all"
 ],"development": [
 "last 1 chrome version","last 1 firefox version","last 1 safari version"
 ]
 },"style": [
 "./node_modules/tipso/src/tipso.css"
],"files": [
 "lib/","bin/","buildin/","declarations/","hot/","web_modules/","schemas/","SECURITY.md"
 ]
}

檔案引數說明：

這個檔案儲存著專案的時候配置的專案基本資訊，它是個標準的json格式檔案，編寫時要注意格式，重點要關注一下scripts裡面的內容，這裡麵包含了專案的一些指令簡寫，在這裡可以配置啟動不同環境的專案的指令。

2.vue.config.js

vue.config.js 是一個可選的配置檔案，如果專案的 (和 package.json 同級的) 根目錄中存在這個檔案，那麼它會被 @vue/cli-service 自動載入。你也可以使用 package.json 中的 vue 欄位，但是注意這種寫法需要你嚴格遵照 JSON 的格式來寫。

這個檔案應該匯出一個包含了選項的物件：

// vue.config.js
{
 // 選項...
}

下面是個比較完整點的配置例項

// Vue.config.js 配置選項
module.exports = {
 // 選項
 // 基本路徑
 publicPath: "./",// 構建時的輸出目錄
 outputDir: "dist",// 放置靜態資源的目錄
 assetsDir: "static",// html 的輸出路徑
 indexPath: "index.html",//檔名雜湊
 filenameHashing: true,//用於多頁配置，預設是 undefined
 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'
 },// 是否在儲存的時候使用 `eslint-loader` 進行檢查。
 lintOnSave: true,// 是否使用帶有瀏覽器內編譯器的完整構建版本
 runtimeCompiler: false,// babel-loader 預設會跳過 node_modules 依賴。
 transpileDependencies: [ /* string or regex */ ],// 是否為生產環境構建生成 source map？
 productionSourceMap: true,// 設定生成的 HTML 中 <link rel="stylesheet"> 和 <script> 標籤的 crossorigin 屬性。
 crossorigin: "",// 在生成的 HTML 中的 <link rel="stylesheet"> 和 <script> 標籤上啟用 Subresource Integrity (SRI)。
 integrity: false,// 調整內部的 webpack 配置
 configureWebpack: () => {},//(Object | Function)
 chainWebpack: () => {},// 配置 webpack-dev-server 行為。
 devServer: {
 open: process.platform === 'darwin',host: '0.0.0.0',port: 8080,https: false,hotOnly: false,// 查閱 https://github.com/vuejs/vue-docs-zh-cn/blob/master/vue-cli/cli-service.md#配置代理
 proxy: {
  '/api': {
  target: "http://app.rmsdmedia.com",changeOrigin: true,secure: false,pathRewrite: {
   "^/api": ""
  }
  },'/foo': {
  target: '<other_url>'
  }
 },// string | Object
 before: app => {}
 },// CSS 相關選項
 css: {
 // 將元件內的 CSS 提取到一個單獨的 CSS 檔案 (只用在生產環境中)
 // 也可以是一個傳遞給 `extract-text-webpack-plugin` 的選項物件
 extract: true,// 是否開啟 CSS source map？
 sourceMap: false,// 為前處理器的 loader 傳遞自定義選項。比如傳遞給
 // Css-loader 時，使用 `{ Css: { ... } }`。
 loaderOptions: {
  css: {
  // 這裡的選項會傳遞給 css-loader
  },postcss: {
  // 這裡的選項會傳遞給 postcss-loader
  }
 },// 為所有的 CSS 及其預處理檔案開啟 CSS Modules。
 // 這個選項不會影響 `*.vue` 檔案。
 modules: false
 },// 在生產環境下為 Babel 和 TypeScript 使用 `thread-loader`
 // 在多核機器下會預設開啟。
 parallel: require('os').cpus().length > 1,// PWA 外掛的選項。
 // 查閱 https://github.com/vuejs/vue-docs-zh-cn/blob/master/vue-cli-plugin-pwa/README.md
 pwa: {},// 三方外掛的選項
 pluginOptions: {
 // ...
 }
}

3.多環境配置

日常專案中我們可能有多個環境，常見的開發、測試和生產，它們的介面地址和執行操作也是不一樣的，所以我們需要配置不同的環境，就拿基本的開發、測試、生產三個環境來說。
首先在根目錄下新建.env.dev、.env.test、.env.prod檔案(開發、測試、生產)

檔案內容：

例如：

在main.js中配置介面地址指向配置檔案的地址

修改package.json檔案中scripts中編譯指令即可進行不同環境的配置，–mode後面指向不同的配置檔案.env.dev、.env.test、.env.prod

執行npm run dev即可訪問開發環境介面

執行npm run test即可使用測試環境介面

執行npm run prod即可訪問生產環境介面

Vue.config.js中可以在configureWebpack中去根據不同環境修改相應的一些配置
例如：

configureWebpack: (config) => {
 if (process.env. VUE_APP_MODE === 'prod') {
 // 為生產環境修改配置...
 }else if(process.env. VUE_APP_MODE === 'test'){
 // 為測試環境修改配置...
 }else {
 // 為開發環境修改配置...
 }
 Object.assign(config,{
 // 開發、測試、生產共同配置
 resolve: {
  alias: {
  '@': path.resolve(__dirname,'./src'),'@c': path.resolve(__dirname,'./src/components'),'@p': path.resolve(__dirname,'./src/pages')
  } // 別名配置
 }
 })
},

打包同理

"build:dev": "vue-cli-service build --mode dev","build:test": "vue-cli-service build --mode test","build:prod": "vue-cli-service build --mode prod"

執行npm run build:dev即可構建開發環境
執行npm run build:test即可構建測試環境
執行npm run build:prod即可構建生產環境

總結

到此這篇關於vue相關配置檔案詳解及多環境配置詳細步驟的文章就介紹到這了,更多相關vue 配置檔案多環境配置內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！