vue-cli常用設(shè)置總結(jié)
更新時(shí)間：2018年02月24日 10:37:40 作者：cc長(zhǎng)空
本文給大家總結(jié)了vue-cli常用設(shè)置,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
基于vue-cli做了好幾個(gè)項(xiàng)目了，想把一些自己的常用設(shè)置寫(xiě)出來(lái)，磨了好久，一看vue-cli3.0都快出來(lái)了，不能再磨了。。
路徑相關(guān)
css內(nèi)引用的資源
build -> utils.js
// generate loader string to be used with extract text plugin
function generateLoaders (loader, loaderOptions) {
//less
// Extract CSS when that option is specified
// (which is the case during production build)
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
publicPath: '../../', //注意: 此處根據(jù)路徑, 自動(dòng)更改
fallback: 'vue-style-loader'
})
} else {
return ['vue-style-loader'].concat(loaders)
}
}
本地訪(fǎng)問(wèn)
config -> index.js
module.exports = {
build: {
//less
//assetsPublicPath: '/',
assetsPublicPath: './',
//less
},
//less
}
調(diào)試相關(guān)
內(nèi)網(wǎng)訪(fǎng)問(wèn)
config -> index.js
module.exports = {
//less
dev: {
//less
port: process.env.PORT || 8080,//可改端口
host:'192.168.0.105',//不是8080端口可能需要指定host為本機(jī)IP
}
}
跨域代理
config -> index.js
module.exports = {
//less
dev: {
//less
proxyTable: {
'/AppHome': {
target: 'http://192.168.0.211:2334',//接口域名
changeOrigin: true,//是否跨域
pathRewrite: {
'^/AppHome': '/AppHome'//需要rewrite重寫(xiě)
}
}
},
}
}
config -> dev.env.js
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
API_HOST: '"AppHome/"'
})
config -> prod.env.js
module.exports = {
NODE_ENV: '"production"',
API_HOST: '"http://xxx.xxx.com/AppHome/"' //生產(chǎn)環(huán)境改為絕對(duì)地址，免得路徑錯(cuò)了
}
//調(diào)用
this.$http
.post(process.env.API_HOST + "GetApproveTypeList", { ID: 0 })
.then(data => {
let $data = data.data;
if ($data.IsSuccess) {
this.list.push(...$data.Model);
}
});
路由加載切換
異步加載可以加快首屏加載速度，但是在開(kāi)發(fā)階段會(huì)導(dǎo)致熱加載變慢，所以根據(jù)NODE_ENV來(lái)判斷，開(kāi)發(fā)環(huán)境不使用異步
let _import
if (process.env.NODE_ENV === 'development') {
_import = file => require('@/components/' + file + '.vue').default
}
if (process.env.NODE_ENV === 'production') {
_import = file => () => import('@/components/' + file + '.vue')
}
routes: [
{
path: '/',
name: 'Index',
component: _import('Approve/Index'),
meta: {
level: 1
}
},
]
打包
dll打包
1、在build目錄新建webpack.dll.conf.js
var path = require("path");
var webpack = require("webpack");
module.exports = {
// 你想要打包的模塊的數(shù)組
entry: {
vendor: ['vue/dist/vue.esm.js', //有些資源需要直接指定js，否則會(huì)重復(fù)打包
'vuex',
'axios',
'vue-router'
]
},
output: {
path: path.join(__dirname, '../static/js'), // 打包后文件輸出的位置
filename: '[name].dll.js',
library: '[name]_library'
// vendor.dll.js中暴露出的全局變量名。
},
plugins: [
new webpack.DllPlugin({
path: path.join(__dirname, '..', '[name]-manifest.json'),
name: '[name]_library',
context: __dirname
}),
// 壓縮打包的文件
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
})
]
};
2、在build目錄下的webpack.prod.conf.js添加新插件
const webpackConfig = merge(baseWebpackConfig, {
//less
plugins: [
//less
new webpack.DllReferencePlugin({
context: __dirname,
manifest: require('../vendor-manifest.json')
})
]
})
3、在項(xiàng)目根目錄下的index.html內(nèi)添加dll.js引用
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>title</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <div id="app"></div> <!-- built files will be auto injected --> <script src="./static/js/vendor.dll.js"></script> </body> </html>
4、在項(xiàng)目根目錄下的package.json內(nèi)添加dll命令(順便給build命令添加report)，運(yùn)行一次生成dll.js
"scripts": {
"dev": "node build/dev-server.js",
"start": "npm run dev",
"build": "node build/build.js --report",
"dll": "webpack --config build//webpack.dll.conf.js"
}
關(guān)閉SourceMap
config -> index.js
module.exports = {
//less
build: {
//less
productionSourceMap: false,
},
}
總結(jié)
以上所述是小編給大家介紹的vue-cli常用設(shè)置總結(jié)，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
vue ajax 攔截原理與實(shí)現(xiàn)方法示例
這篇文章主要介紹了vue ajax 攔截原理與實(shí)現(xiàn)方法,結(jié)合實(shí)例形式分析了vue.js基于ajax攔截實(shí)現(xiàn)無(wú)刷新登錄的相關(guān)原理與操作技巧,需要的朋友可以參考下2019-11-11
這篇文章主要介紹了Vue中$refs的用法，非常不錯(cuò)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2018-06-06
雖然Vue.js作為一個(gè)現(xiàn)代化的前端框架,鼓勵(lì)使用其自身的響應(yīng)式機(jī)制來(lái)處理DOM操作,但在某些情況下,尤其是在需要維護(hù)舊系統(tǒng)的項(xiàng)目中,可能會(huì)遇到需要引入jQuery的情況,本文將詳細(xì)講解如何在Vue項(xiàng)目中引入jQuery,需要的朋友可以參考下2024-09-09
vue項(xiàng)目中使用rimraf?dev啟動(dòng)時(shí)刪除dist目錄方式
這篇文章主要介紹了vue項(xiàng)目中使用rimraf?dev啟動(dòng)時(shí)刪除dist目錄方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
使用Vue3和Pinia實(shí)現(xiàn)網(wǎng)頁(yè)刷新功能
在現(xiàn)代 Web 開(kāi)發(fā)中,保持用戶(hù)界面的動(dòng)態(tài)性和響應(yīng)性至關(guān)重要,當(dāng)用戶(hù)觸發(fā)某些操作時(shí),例如點(diǎn)擊按鈕或者完成表單提交,我們往往需要刷新頁(yè)面的一部分來(lái)展示最新的數(shù)據(jù),本文將介紹如何使用 Vue 3 和 Pinia 來(lái)實(shí)現(xiàn)這一功能,需要的朋友可以參考下2024-08-08
這篇文章主要給大家介紹了關(guān)于vite打包拆分js和css的配置指南,Vite是一個(gè)非?？焖俚墓ぞ?它可以幫助你打包JavaScript文件,需要的朋友可以參考下2023-09-09
這篇文章主要介紹了vue3的沙箱機(jī)制的相關(guān)資料，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-04-04
Vue鼠標(biāo)右鍵畫(huà)矩形和Ctrl按鍵多選組件方式
文章介紹了一個(gè)Vue組件,該組件允許用戶(hù)通過(guò)鼠標(biāo)右鍵在畫(huà)布上繪制矩形,并且支持通過(guò)Ctrl鍵進(jìn)行多選,文章附帶了組件代碼和一個(gè)示例,建議讀者將代碼復(fù)制到自己的開(kāi)發(fā)環(huán)境中進(jìn)行調(diào)試2024-12-12
使用Vue3實(shí)現(xiàn)在瀏覽器端進(jìn)行zip文件壓縮
在前端開(kāi)發(fā)中,我們時(shí)常需要處理文件上傳和下載的功能,本文主要和大家分享一下如何使用Vue3和JSZip庫(kù)在瀏覽器端實(shí)現(xiàn)zip文件壓縮,需要的可以參考下2024-05-05
Vue3增加了很多讓人眼前一亮的特征,suspense 組件就是其中之一,對(duì)處理異步請(qǐng)求數(shù)據(jù)非常實(shí)用,下面這篇文章主要給大家介紹了關(guān)于Vue3中如何使用異步請(qǐng)求的相關(guān)資料,需要的朋友可以參考下2022-06-06