欢迎访问优讯网!
您当前的位置:首页 > 爱编程

Vue引入Stylus知识点总结

时间:2020-01-17 08:35:51  来源:优讯网  作者:小卡司  浏览次数:
在本篇文章里小编给各位整理的是一篇关于Vue引入Stylus知识点总结内容,有需要的朋友们可以学习参考下。

项目中使用引入文件有时候路径比较深,需要使用"../../../xx.js"这种类似的路劲引入,这种方式比较笨,可以使用webpack的别名alias配置来解决。

首先,先确定项目中是否有path模块:

如果没有path模块需要先安装path

 
1 npm install path --save

以下为vue.config.js配置

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const path = require("path");
function resolve(dir) {
 return path.join(__dirname, dir);
}
 
module.exports = {
 chainWebpack: config => {
  config.resolve.alias
   .set("@", resolve("src"))
   .set("assets", resolve("src/assets"))
   .set("components", resolve("src/components"))
   .set("base", resolve("baseConfig"))
   .set("public", resolve("public"));
 },
}

项目开发阶段经常需要console一些测试数据,查看开发过程中遇到的问题,但生产环境中这些console数据需要清掉,以前操作是项目配置一个全局的标志,判断是否打印console数据,近期发现一个更简便的方法,通过webpack配置生产环境自动清除console。

首先,安装uglifyjs-webpack-plugin插件:

 
1 npm install uglifyjs-webpack-plugin --save

其次,在vue.config.js文件引入插件。

最后,配置configureWebpack如下代码:

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
const UglifyJsPlugin = require("uglifyjs-webpack-plugin"); // 引入插件
 
module.exports = {
 configureWebpack: {
  optimization: {
   minimizer: [
    new UglifyJsPlugin({
     uglifyOptions: {
      compress: {
       warnings: false,
       drop_console: true, //console
       drop_debugger: false,
       pure_funcs: ["console.log"] //移除console
      }
     }
    })
   ]
  }
 },
}

以上就是本次介绍的Vue引入Stylus的全部知识点

来顶一下
返回首页
返回首页

原文链接:https://www.jb51.net/article/178627.htm


推荐资讯
如何下载旧版centos iso镜像 如何下载迷你mini版的centos镜像
如何下载旧版centos i
计算机的正确使用姿势 电脑痴如何正确的使用电脑
计算机的正确使用姿势
好用的后台管理的前端框架模版H-ui H-ui框架模版分享
好用的后台管理的前端
微信电脑多开方法 无需辅助电脑版微信双开方法分享
微信电脑多开方法 无
相关文章
栏目更新
栏目热门