脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue-cli常用设置

vue-cli常用设置总结

 更新时间：2018年02月24日 10:37:40   作者：cc长空  
本文给大家总结了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 ajax 拦截原理与实现方法示例

    vue ajax 拦截原理与实现方法示例

    这篇文章主要介绍了vue ajax 拦截原理与实现方法,结合实例形式分析了vue.js基于ajax拦截实现无刷新登录的相关原理与操作技巧,需要的朋友可以参考下
    2019-11-11
  • Vue中$refs的用法详解

    Vue中$refs的用法详解

    这篇文章主要介绍了Vue中$refs的用法，非常不错，具有一定的参考借鉴价值 ,需要的朋友可以参考下
    2018-06-06
  • Vue引入jQuery的方法和配置教程

    Vue引入jQuery的方法和配置教程

    虽然Vue.js作为一个现代化的前端框架,鼓励使用其自身的响应式机制来处理DOM操作,但在某些情况下,尤其是在需要维护旧系统的项目中,可能会遇到需要引入jQuery的情况,本文将详细讲解如何在Vue项目中引入jQuery,需要的朋友可以参考下
    2024-09-09
  • vue项目中使用rimraf dev启动时删除dist目录方式

    vue项目中使用rimraf dev启动时删除dist目录方式

    这篇文章主要介绍了vue项目中使用rimraf dev启动时删除dist目录方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-04-04
  • 使用Vue3和Pinia实现网页刷新功能

    使用Vue3和Pinia实现网页刷新功能

    在现代 Web 开发中,保持用户界面的动态性和响应性至关重要,当用户触发某些操作时,例如点击按钮或者完成表单提交,我们往往需要刷新页面的一部分来展示最新的数据,本文将介绍如何使用 Vue 3 和 Pinia 来实现这一功能,需要的朋友可以参考下
    2024-08-08
  • vite打包拆分js和css的配置指南

    vite打包拆分js和css的配置指南

    这篇文章主要给大家介绍了关于vite打包拆分js和css的配置指南,Vite是一个非常快速的工具,它可以帮助你打包JavaScript文件,需要的朋友可以参考下
    2023-09-09
  • 详解vue3的沙箱机制

    详解vue3的沙箱机制

    这篇文章主要介绍了vue3的沙箱机制的相关资料，帮助大家更好的理解和学习使用vue框架，感兴趣的朋友可以了解下
    2021-04-04
  • Vue鼠标右键画矩形和Ctrl按键多选组件方式

    Vue鼠标右键画矩形和Ctrl按键多选组件方式

    文章介绍了一个Vue组件,该组件允许用户通过鼠标右键在画布上绘制矩形,并且支持通过Ctrl键进行多选,文章附带了组件代码和一个示例,建议读者将代码复制到自己的开发环境中进行调试
    2024-12-12
  • 使用Vue3实现在浏览器端进行zip文件压缩

    使用Vue3实现在浏览器端进行zip文件压缩

    在前端开发中,我们时常需要处理文件上传和下载的功能,本文主要和大家分享一下如何使用Vue3和JSZip库在浏览器端实现zip文件压缩,需要的可以参考下
    2024-05-05
  • Vue3中如何使用异步请求示例详解

    Vue3中如何使用异步请求示例详解

    Vue3增加了很多让人眼前一亮的特征,suspense 组件就是其中之一,对处理异步请求数据非常实用,下面这篇文章主要给大家介绍了关于Vue3中如何使用异步请求的相关资料,需要的朋友可以参考下
    2022-06-06

最新评论