Vue引入Stylus

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

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

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

npm  install  path  --save

以下为vue.config.js配置

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插件:

npm  install  uglifyjs-webpack-plugin  --save

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

最后,配置configureWebpack如下代码:

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
            }
          }
        })
      ]
    }
  },
}

原文地址:https://www.cnblogs.com/Mikusa/p/12200701.html

时间: 2024-10-10 10:04:25

Vue引入Stylus的相关文章

vue 引入通用 css

1.在入口 js 文件 main.js 中引入,一些公共的样式文件,可以在这里引入. import Vue from 'vue' import App from './App' // 引入App这个组件 import router from './router' /* 引入路由配置 */ import axios from 'axios' import '../static/css/global.css' /*引入公共样式*/ 2.在 index.html 中引入,这个不说了: 3.在 app.

vue使用stylus样式预处理器

vue使用stylus样式预处理器,样式总是报错,需要从上一行的样式回车换行才不会报错 <style lang="stylus" scoped> .navbar margin-bottom:1rem & > .nav padding: 20px </style> 原文地址:https://www.cnblogs.com/wcn123456/p/9525233.html

vue学习记录:vue引入,validator验证,数据信息,vuex数据共享

最近在学习vue,关于学习过程中所遇到的问题进行记录,包含vue引入,validator验证,数据信息,vuex数据共享,传值问题记录 1.vue 引入vue vue的大致形式如下: <template> </template> <script> </script> <style> </style> 要引入其他vue ,需要 import <template> <div> <Header></

VUE引入模块之import xxx from &#39;xxx&#39; 和 import {xxx} from &#39;xxx&#39;的区别

import FunName from ‘../xxx’ export defualt function FunName() { return fetch({ url: '/article/list', method: 'get' }); } import {xxx} from ‘../xxx’ export function FunName() { return fetch({ url: '/article/list', method: 'get' }); } ES中的模块导出导入 expor

如何在vue中全局引入stylus文件的公共变量

新建 一个公共的stylus公共文件添加公共变量,如下: 修改下图圈出的文件: 具体的修改如下: // generate loader string to be used with extract text plugin function generateLoaders (loader, loaderOptions) { const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader] if (loader

vue引入assets和static静态资源问题

1.assets文件夹与static文件夹的区别 assets文件是src下的,所以最后运行时需要进行打包,一般用来存放自己用到的静态资源: static文件不需要打包就直接放在最终的文件中了,一般用来存放第三方静态资源. 引入静态资源方法:js中用import,css中用@import url(...) ,index.html中用link(script)标签引入. 利用vue-cli脚手架搭建的webpack对各种文件的编译一般是配置好的. 2.遇到的问题 第一次使用vue构建工具做项目,业余

vue引入Vue-Awesome

Vue-Awesome建立在Font Awesome上 v4.5.0,取决于Vue.js v2.0.1 +,所以安装了Vue-Awesome就可以直接使用Font Awesome的字体图标. 1.安装Vue-Awesome $ npm install vue-awesome 2.引入Vue-Awesome 在main.js文件中加入以下代码: import 'vue-awesome/icons' import Icon from 'vue-awesome/components/Icon' Vue

vue引入自己写的js文件

话不多说,直接上代码呀~ 先来个结构图: 中规中矩的vue-cli就写了一个自己的js文件 那么我想要引入到vue组件里. 1.首先写我的js文件 2.引入到vue组件!!!一定要用{}把方法名拿过来 3.可以开心使用了 [关于引入第三方插件:简单的说一下三种方式] 一.可以cdn直接引入到index.html里,记得放在</body>前面哦 二.配置webpack : 1.首先在package.json里加入, dependencies:{ "jquery" : &quo

vue引入jquery

在vue中我们如何引入jquery 1.在package.json里面的dependencies 加入"jquery":"^3.2.1", 图示 2. 终端输入  npm install jquery --save-dev (注意:jquery 一定要小写 不然会提示  Please use 'jquery' (all lowercase)) 图示 3.找到build文件开始配置   build===>webpack.base.conf.js===>添加