vue-cli4脚手架配置

梦里梦外; 2022-12-27 07:19 127阅读 0赞

###### 在项目根目录创建vue.config.js文件 ######

const path = require("path"); //引入path模块
    function resolve(dir) { 
      return path.join(__dirname, dir); //path.join(__dirname)设置绝对路径
    }
    module.exports = { 
      publicPath: "./",
      outputDir: "dist",
      assetsDir: "assets",
      // 反向代理
      devServer: { 
        proxy: { 
          "/api": { 
            target: "http://test.com/",
            changeOrigin: true,
            pathRewrite: { 
              "^/api": "/api", // 这种接口配置出来 http://test.com/api/login
              //'^/api': '' 这种接口配置出来 http://test.com/login
              //'^/api': '/' 这种接口配置出来 http://test/login
            },
          },
        },
      },
      // 修改index.html的title标题
      // chainWebpack: (config) => { 
      // // 利用webpack定义title：<%= htmlWebpackPlugin.options.title %>
      // config.plugin("html").tap((args) => { 
      // args[0].title = "测试标题";
      // return args;
      // });
      // },
      /* 是否在构建生产包时生成 sourceMap 文件，false将提高构建速度 */
      productionSourceMap: false,
      lintOnSave: false,
      css: { 
        sourceMap: true,
      },
      // 引入全局less------start
      chainWebpack: (config) => { 
        const types = ["vue-modules", "vue", "normal-modules", "normal"];
        types.forEach((type) =>
          addStyleResource(config.module.rule("less").oneOf(type))
        );
      },
    };
    
    function addStyleResource(rule) { 
      rule
        .use("style-resource")
        .loader("style-resources-loader")
        .options({ 
          patterns: [path.resolve(__dirname, "./src/static/css/public.less")],
        });
      // 引入全局less------end
    }

项目中常用插件

axios用来封装html请求
    npm install axios
    normalize.css用来初始化页面样式
    npm install normalize
    weixin-js-sdk用来使用微信api
    npm install weixin-js-sdk
    style-resources-loader用来对less等预处理，以上示例引入全局less用到
    npm i style-resources-loader -D

发表评论取消回复

表情：

评论列表（有 0 条评论，127人围观）

还没有评论，来说两句吧...

相关阅读

相关【Vue】day03-VueCli（脚手架）

day03 一、今日目标 1.生命周期 1. 生命周期介绍 2. 生命周期的四个阶段 3. 生命周期钩子 4. 声明周期案例 2.综合案例-小黑记

布满荆棘的人生/ 2024年03月18日 00:32/ 0 赞/ 110 阅读

相关 vuecli4 启动_Vue-Cli 4.x运行环境配置问题

Vue-Cli自3.x以上版本取消了Config目录，因此，需要玩家自己手动配置，具体方案如下： 1. 在项目的根目录新建vue.config.js文件，并在该文件中配置相应

旧城等待，/ 2023年01月08日 08:20/ 0 赞/ 164 阅读

相关 vue-cli4脚手架配置

在项目根目录创建vue.config.js文件 const path = require("path"); //引入path模块 function res

梦里梦外;/ 2022年12月27日 07:19/ 0 赞/ 128 阅读

相关 VueCli 脚手架详解（从安装到实际运用）

Cli是什么？是在图形用户界面得到普及之前使用最为广泛的用户界面，它通常不支持鼠标，用户通过键盘输入指令，计算机接收到指令后，予以执行。也有人称之为字符用户界面（CUI）

小咪咪/ 2022年12月27日 01:56/ 0 赞/ 272 阅读

相关 vuecli脚手架配置文件说明

vuecli脚手架座右铭：越努力越幸运，越运动越健康。热爱计算机技术，热爱运动的这样一个人 -------------------- 文章目录 vuec

快来打我*/ 2022年12月23日 11:29/ 0 赞/ 251 阅读

相关使用VueCLI脚手架创建项目

\\VueCLI脚手架创建项目安装脚手架 \[VueCLI官网\] (https://cli.vuejs.org/zh/guide/installatio

素颜马尾好姑娘i/ 2022年11月21日 09:58/ 0 赞/ 389 阅读

相关 vuecli4中配置服务器

元气满满，直接干！在使用vuecli4开发项目时，如果需要自己开发服务器测试项目，单独编写一个服务器，非常难受！这时，我们可以在vuecli4中直接进行服务器开发。过

女爷i/ 2022年09月02日 00:44/ 0 赞/ 279 阅读

相关 vuecli4中配置打包使用相对路径

元气满满，直接干！使用vuecli4进行项目打包时，默认使用的是根目录的方式，这样打包直接项目直接运行就是一个大白屏，非常难受！这时我们就需要在设置打包使用相对目录的方

╰半橙微兮°/ 2022年09月02日 00:44/ 0 赞/ 310 阅读

相关 vuecli4中手动配置less或者scss

元气满满，直接干~~ 假设我们创建项目时选择的是scss，但是项目中我们突然想要使用less,直接使用的话就会报错，非常难受。这时我们需要做的非常简单，只需要在项目中安装

布满荆棘的人生/ 2022年09月02日 00:43/ 0 赞/ 287 阅读

相关 vuecli4中配置px自动转换vw

元气满满，直接干~~~ 移动端使用vw实现响应式布局时，需要自己计算vm的数值，非常难用！什么是vw：默认将屏幕宽度分为100份，1vw = 一份。在vuecli4中

浅浅的花香味﹌/ 2022年09月02日 00:43/ 0 赞/ 185 阅读