vue-cli4脚手架配置

在项目根目录创建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