vue2 x vue cli3 配置路徑別名

2021-10-02 06:13:52 字數 1603 閱讀 6322

工作中,想在vue 工程中啟動webpack打包的時候,傳乙個配置引數給瀏覽器

這樣瀏覽器環境根據 配置的引數 就可以區分環境,例如: 資料是從「mock環境」還是「生產環境」中獲取資料

同事給我的建議是了解 webpack 是如何把jquery 引入到全域性的,那麼這個方法就類似jquery 的配置資訊是房子 node_module 中,我不可能將自己的配置檔案發布到 npm 伺服器中,這樣太麻煩

因此,就定義乙個路徑別名,webpack 能夠根據自定義路徑找到配置檔案

// vue.config.js

const webpack =

require

("webpack");

const merge =

require

("webpack-merge");

let path =

require

('path'

)const cfg =

;module.exports =);

// 自定義路徑

config.resolve.alias

.set(

'myconfig'

, path.

join

(__dirname,

'./myconfig/config.js'))

// key,value自行定義,比如.set('@@', resolve('src/components'))

.set

('@config'

, path.

join

(__dirname,

'./myconfig'))

// key,value自行定義,比如.set('@@', resolve('src/components'))},

configurewebpack:)]

} publicpath:

"./"

};

備註:

修改路徑的配置是在chainwebpack節點下面,使用config.resolve.alias配置節點

別名可以代表檔案路徑上面案例,演示了 chainwebpack 下修改多個配置資訊的使用場景main.js 根據別名引入配置檔案

import vue from

'vue'

import cfg from

'@config/config.js'

import myconfig from

'myconfig'

// cfg 和 myconfig 是同乙個檔案內容

console.

log(cfg)

console.

log(myconfig)

newvue()

.$mount

()

定義配置檔案工程根目錄/myconfig/config.js
export

default

vue2 和 vue3 路由使用對比

vue2 vue3 路由跳轉 通過query 跳轉 詳情 path替換成name也可以,寫法如下 詳情 js跳轉 this router.push import from vue router const router userouter router.push 路由跳轉 通過params 跳轉 詳...

vue2路由view router配置(懶載入)

vue路由配置以及按需載入模組配置 1 首先在component檔案目錄下寫倆元件 first.vue 我是第乙個頁面 second.vue 我是第二個頁面 2 router目錄下的index.js檔案配置路由資訊 import vue from vue import vuerouter from ...

詳解vue2路由vue router配置(懶載入)

vue路由配置以及按需載入模組配置 1 首先在component檔案目錄下寫倆元件 first.vue 我是第乙個頁面 second.vue 我是第二個頁面 2 router目錄下的index.js檔案配置路由資訊 import vue from vue import vuerouter from ...