亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

vue相關配置文件詳解及多環(huán)境配置詳細步驟

 更新時間:2020年05月19日 09:59:01   作者:是老王吖  
這篇文章主要介紹了vue相關配置文件詳解及多環(huán)境配置的教程,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下

1.package.json

作用:
package.json 文件其實就是對項目或者模塊包的描述,里面包含許多元信息。比如項目名稱,項目版本,項目執(zhí)行入口文件,項目貢獻者等等。npm install 命令會根據這個文件下載所有依賴模塊。

文件結構如下:

{
 "name": "sop-vue",
 "version": "0.1.0",
 "author": "zhangsan <zhangsan@163.com>",
 "description": "sop-vue",
 "keywords":["node.js","javascript"],
 "private": true,
 "bugs":{"url":"http://path/to/bug","email":"bug@example.com"},
 "contributors":[{"name":"李四","email":"lisi@example.com"}],
 "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里面的內容,這里面包含了項目的一些指令簡寫,在這里可以配置啟動不同環(huán)境的項目的指令。

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",
 // 放置靜態(tài)資源的目錄
 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 */ ],
 // 是否為生產環(huán)境構建生成 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 文件 (只用在生產環(huán)境中)
 // 也可以是一個傳遞給 `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
 },
 // 在生產環(huán)境下為 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.多環(huán)境配置

日常項目中我們可能有多個環(huán)境,常見的開發(fā)、測試和生產,它們的接口地址和執(zhí)行操作也是不一樣的,所以我們需要配置不同的環(huán)境,就拿基本的開發(fā)、測試、生產三個環(huán)境來說。
首先在根目錄下新建.env.dev、.env.test、.env.prod文件(開發(fā)、測試、生產)

在這里插入圖片描述

文件內容:

例如:

在這里插入圖片描述在這里插入圖片描述
在這里插入圖片描述

在main.js中配置接口地址指向配置文件的地址

在這里插入圖片描述

修改package.json文件中scripts中編譯指令即可進行不同環(huán)境的配置,–mode后面指向不同的配置文件.env.dev、.env.test、.env.prod
在這里插入圖片描述
運行npm run dev即可訪問開發(fā)環(huán)境接口
在這里插入圖片描述

運行npm run test即可使用測試環(huán)境接口
在這里插入圖片描述
運行npm run prod即可訪問生產環(huán)境接口
在這里插入圖片描述

Vue.config.js中可以在configureWebpack中去根據不同環(huán)境修改相應的一些配置
例如:

configureWebpack: (config) => {
 if (process.env. VUE_APP_MODE === 'prod') {
 // 為生產環(huán)境修改配置...
 }else if(process.env. VUE_APP_MODE === 'test'){
 // 為測試環(huán)境修改配置...
 }else {
 // 為開發(fā)環(huán)境修改配置...
 }
 Object.assign(config, {
 // 開發(fā)、測試、生產共同配置
 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即可構建開發(fā)環(huán)境
運行npm run build:test即可構建測試環(huán)境
運行npm run build:prod即可構建生產環(huán)境

在這里插入圖片描述

總結

到此這篇關于vue相關配置文件詳解及多環(huán)境配置詳細步驟的文章就介紹到這了,更多相關vue 配置文件多環(huán)境配置內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!

相關文章

  • vue+iview tabs context-menu 彈出框修改樣式的方法

    vue+iview tabs context-menu 彈出框修改樣式的方法

    今天遇到一個需求說頁面頂部的菜單右鍵彈出框離得有點遠,需要我們做調整,下面小編給大家分享下vue+iview tabs context-menu 彈出框修改樣式的方法,感興趣的朋友跟隨小編一起看看吧
    2024-06-06
  • vue的keep-alive用法技巧

    vue的keep-alive用法技巧

    在本篇文章里小編給大家整理的是關于vue的keep-alive用法技巧以及實例代碼,需要的朋友們學習下。
    2019-08-08
  • vue插件及修改ip啟動端口解析

    vue插件及修改ip啟動端口解析

    這篇文章主要為大家介紹了vue插件及修改ip啟動端口的解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步早日升職加薪
    2022-04-04
  • element的el-date-picker組件實現只顯示年月日時分效果(不顯示秒)

    element的el-date-picker組件實現只顯示年月日時分效果(不顯示秒)

    最近遇到這樣的需求使用element的el-date-picker組件,只顯示時分,不顯示秒,下面小編給大家分享element的el-date-picker組件實現只顯示年月日時分效果,感興趣的朋友一起看看吧
    2024-08-08
  • Vue打包優(yōu)化之生產環(huán)境刪除console日志配置

    Vue打包優(yōu)化之生產環(huán)境刪除console日志配置

    這篇文章主要為大家介紹了Vue打包優(yōu)化之生產環(huán)境刪除console日志配置詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2023-06-06
  • vue實現鼠標移過出現下拉二級菜單功能

    vue實現鼠標移過出現下拉二級菜單功能

    這篇文章主要介紹了vue實現鼠標移過出現下拉二級菜單功能,本文給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下
    2019-12-12
  • Vue 單文件中的數據傳遞示例

    Vue 單文件中的數據傳遞示例

    本篇文章主要介紹了Vue 單文件中的數據傳遞示例,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-03-03
  • 一次用vue3簡單封裝table組件的實戰(zhàn)過程

    一次用vue3簡單封裝table組件的實戰(zhàn)過程

    之所以封裝全局組件是為了省事,所有的目的,全都是為了偷懶,下面這篇文章主要給大家介紹了關于用vue3簡單封裝table組件的相關資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下
    2022-12-12
  • vue使用js-file-download完成導出功能實例

    vue使用js-file-download完成導出功能實例

    這篇文章主要介紹了vue使用js-file-download完成導出功能實例,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-07-07
  • vue項目實現img的src動態(tài)賦值

    vue項目實現img的src動態(tài)賦值

    這篇文章主要介紹了vue項目實現img的src動態(tài)賦值方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-03-03

最新評論