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 彈出框修改樣式的方法,感興趣的朋友跟隨小編一起看看吧2024-06-06element的el-date-picker組件實現只顯示年月日時分效果(不顯示秒)
最近遇到這樣的需求使用element的el-date-picker組件,只顯示時分,不顯示秒,下面小編給大家分享element的el-date-picker組件實現只顯示年月日時分效果,感興趣的朋友一起看看吧2024-08-08Vue打包優(yōu)化之生產環(huán)境刪除console日志配置
這篇文章主要為大家介紹了Vue打包優(yōu)化之生產環(huán)境刪除console日志配置詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-06-06