vue-cli常用设置总结
网络编程 2021-07-04 17:33www.168986.cn编程入门
本文给大家总结了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./AppHome/"' //生产环境改为绝对地址,免得路径错了 } //调用 this.$http .post(process.env.API_HOST + "GetApproveTypeList", { ID: 0 }) .then(data => { let $data = data.data; if ($data.IsSuess) { this.list.push(...$data.Model); } });
路由加载切换
异步加载可以加快首屏加载速度,但是在开发阶段会导致热加载变慢,所以根据NODE_ENV来判断,开发环境不使用异步
let _import if (process.env.NODE_ENV === 'development') { _import = file => require('@/ponents/' + file + '.vue').default } if (process.env.NODE_ENV === 'production') { _import = file => () => import('@/ponents/' + file + '.vue') } routes: [ { path: '/', name: 'Index', ponent: _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({ press: { 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常用设置总结,希望对大家有所帮助,如果大家有任何疑问请给我留言,长沙网络推广会及时回复大家的。在此也非常感谢大家对狼蚁SEO网站的支持!
上一篇:vue cli webpack中使用sass的方法
下一篇:JS处理一些简单计算题
编程语言
- 机械手焊接机器人编程 机械手焊接设备编程
- vb数据库编程实例,vb做数据库
- tiobe世界编程语言排行榜,全球编程语言排行
- 成都java编程培训 成都it编程培训中心
- 编程基础培训,编程基础知识培训
- flash游戏编程基础教程,flash游戏开发教程
- 不会英语能学编程吗 不会英语可以学程序员吗
- 爱心代码编程C语言 爱心代码编程c语言公式
- c语言编程学习入门 c语言编程快速入门
- 西门子plc编程培训 西门子plc编程培训班
- 哪里可以学编程 台州哪里可以学编程
- 少儿编程哪个好 少儿编程哪个品牌好
- 编程是什么意思,图形编程是什么意思
- c语言编程软件下载,c语言编程软件在哪下载
- java编程软件下载,java编程下载手机版
- ug编程培训学校,ug编程培训教程