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常用设置总结，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
您可能感兴趣的文章:
- Vue-cli中为单独页面设置背景色的实现方法
- Apache虚拟目录配置及vue-cli反向代理的设置方法
- 详解vue-cli本地环境API代理设置和解决跨域
相关推荐
-
Apache虚拟目录配置及vue-cli反向代理的设置方法
配置需求来自于前后端分离.后台由于使用PHP或者Java,但是前端使用vue,React这些框架时怎么和后端有效的数据通信.反向代理是个很好的选择,虽然jsonp也可以,单并不好玩. Apache配置虚拟目录 -实际上线项目需要通过域名来访问,比如http://www.xxx.com,但在本机上如何配置虚拟域名来访问本机的项目呢? 1.找到C:\Windows\System32\drivers\etc\hosts这个文件添加以下格式内容 127.0.0.1 www.mytest.com //你的
-
详解vue-cli本地环境API代理设置和解决跨域
前言 我们在使用vue-cli启动项目的时候npm run dev便可以启动我们的项目了,通常我们的请求地址是以localhost:8080来请求接口数据的,localhost是没有办法设置cookie的. 我们可以在vue-cli配置文件里面设置一个代理,跨域的方法有很多,通常需要后台来进行配置.我们可以直接通过node.js代理服务器来实现跨域请求. vue proxyTable接口跨域请求调试 在vue-cli项目中的config文件夹下的index.js配置文件中,dev长这样子: de
-
Vue-cli中为单独页面设置背景色的实现方法
例子: <template> <div class="finish-wrap"> <div class="finish-header"> <div class="finish-img"> </div> </div> <div class="finish-tip"> 支付成功 </div> <div class="fi
-
Vue CLI 3搭建vue+vuex最全分析(推荐)
一.介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.有三个组件: CLI:@vue/cli 全局安装的 npm 包,提供了终端里的vue命令(如:vue create .vue serve .vue ui 等命令) CLI 服务:@vue/cli-service是一个开发环境依赖.构建于 webpack和 webpack-dev-server之上(提供 如:serve.build 和 inspect 命令) CLI 插件:给Vue 项目提供可选功能的 npm 包 (如:
-
vue 项目常用加载器及配置详解
本文介绍了vue 项目常用加载器及配置详解,分享给大家,具体如下: 1.安装sass: 1.1 由于sass-loader依赖于node-sass,所以在安装sass-loader的同时还需安装node-sass npm install --save-dev node-sass npm install --save-dev sass-loader 1.2 安装完成后修改 <style>标签: <style lang="scss"></style> 2
-
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 i
-
vue cli升级webapck4总结
webpack4 released 已经有一段时间了,插件系统趋于平稳,适逢对webpack3的打包速度很不满意,因此决定将当前在做的项目进行升级,正好也实践一下webpack4. 新特性 0配置 应该是parcel出来以后,webpack团队意识到其配置确实有点复杂,不太容易上手.so, webapck4 开始支持0配置启动.不过,万变不离其宗,webpack4的0配置也只是支持了默认entry 和 output而已,即默认entry为./src,默认output为/dist. 模式选择mod
-
详解Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on
Vue.js的指令是以v-开头的,它们作用于HTML元素,指令提供了一些特殊的特性,将指令绑定在元素上时,指令会为绑定的目标元素添加一些特殊的行为,我们可以将指令看作特殊的HTML特性(attribute). Vue.js提供了一些常用的内置指令,如下: v-if指令 v-for指令 v-show指令 v-else指令 v-bind指令 v-on指令 1:v-if指令 v-if指令是条件渲染指令,它根据表达式的真假来删除和插入元素,它的基本语法如下: v-if="expression"
-
Vue Cli 3项目使用融云IM实现聊天功能的方法
介绍:前台使用vue开发的单页面,后台使用ant design pro单页面,实现手机端和后台聊天功能. 效果如图(PC+移动): 一.申请融云账号(token.appKey) 建议先看教程:sdk使用介绍 过一遍教程,接下来开始写 二.引入融云IM 如图: 位置:public/index.html,引入 <script src="https://cdn.ronghub.com/RongIMLib-2.3.5.min.js"></script> 三.可以正常使用
-
一篇文章，教你学会Vue CLI 插件开发
前言 如果你正在使用Vue框架,那么你肯定知道Vue CLI是什么.Vue-cli 3,它是Vue.js 开发的标准工具(脚手架),提供项目支架和原型设计. 除了日常构建打包项目,Vue CLI3 的一个重要部分是cli-plugins,插件开发. 本文将教你如何科学的创建一个Vue-CLI 插件,以及项目独立npm包. 1. 什么是CLI plugin 它可以修改内部webpack配置并将命令注入到vue-cli-service.一个很好的例子是@vue/cli-plugin-typescri
-
vue cli 3.0 搭建项目的图文教程
1.3.0版本包括了默认预设配置和用户自定义设置 2.对比2.0来看3.0的目录结构更加精简了 移除了配置文件目录 (config 和 build文件夹) 移除了 static 文件夹,新增 public 文件夹,并且 index.html 移动到 public 中 在 src 文件夹中新增了 views 文件夹,用于分类视图组件和公共组件 vue-cli 3.0 搭建 1. 安装或升级 Node.js vue-cli官网对于node版本有明确要求 Vue CLI 需要 Node.js 8.9
-
Vue CLI项目 axios模块前后端交互的使用(类似ajax提交)
Vue-CLI项目-axios模块前后端交互(类似ajax提交)08.31自我总结,内容如下: Vue-CLI项目-axios前后端交互 一.模块的安装 npm install axios --save #--save可以不用写 二.配置main.js import axios from 'axios' Vue.prototype.$axios = axios; 三.使用 created() { // 组件创建成功的钩子函数 // 拿到要访问课程详情的课程id let id = this.$ro
-
详解@Vue/Cli 3 Invalid Host header 错误解决办法
我的host设置 报错如下: 解决办法: @Vue/Cli 3 在vue.config.js里加上 .disableHostCheck(true) vue-cli 在webpack.dev.conf.js里加上 devServer: { disableHostCheck: true } 最后 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们.