溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章給大家分享的是有關vue-cli常用設置有哪些的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。
基于vue-cli做了好幾個項目了，想把一些自己的常用設置寫出來，磨了好久，一看vue-cli3.0都快出來了，不能再磨了。。
路徑相關
css內引用的資源
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: '../../', //注意: 此處根據路徑, 自動更改
fallback: 'vue-style-loader'
})
} else {
return ['vue-style-loader'].concat(loaders)
}
}本地訪問
config -> index.js
module.exports = {
build: {
//less
//assetsPublicPath: '/',
assetsPublicPath: './',
//less
},
//less
}調試相關
內網訪問
config -> index.js
module.exports = {
//less
dev: {
//less
port: process.env.PORT || 8080,//可改端口
host:'192.168.0.105',//不是8080端口可能需要指定host為本機IP
}
}跨域代理
config -> index.js
module.exports = {
//less
dev: {
//less
proxyTable: {
'/AppHome': {
target: 'http://192.168.0.211:2334',//接口域名
changeOrigin: true,//是否跨域
pathRewrite: {
'^/AppHome': '/AppHome'//需要rewrite重寫
}
}
},
}
}
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/"' //生產環境改為絕對地址，免得路徑錯了
}
//調用
this.$http
.post(process.env.API_HOST + "GetApproveTypeList", { ID: 0 })
.then(data => {
let $data = data.data;
if ($data.IsSuccess) {
this.list.push(...$data.Model);
}
});路由加載切換
異步加載可以加快首屏加載速度，但是在開發階段會導致熱加載變慢，所以根據NODE_ENV來判斷，開發環境不使用異步
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 = {
// 你想要打包的模塊的數組
entry: {
vendor: ['vue/dist/vue.esm.js', //有些資源需要直接指定js，否則會重復打包
'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、在項目根目錄下的index.html內添加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、在項目根目錄下的package.json內添加dll命令(順便給build命令添加report)，運行一次生成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"
}關閉SourceMap
config -> index.js
module.exports = {
//less
build: {
//less
productionSourceMap: false,
},
}感謝各位的閱讀！關于“vue-cli常用設置有哪些”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
