Vue2 new project (2)

The content of this article is mainly to write the interface

Add page content

Add variables and functions
insert image description here

install axios

insert image description here

call interface

insert image description here
Run it successfully, then pack it and try it out. Run npm run build and find that an error
insert image description here
is reported because we have not configured vue.config.js.
First download the path dependency, run npm install --save path
and then create the vue.config.js file
insert image description here
. The code is as follows:

const path = require("path");
function resolve(dir) {
    
    
  return path.join(__dirname, dir);
}

module.exports = {
    
    
  // 是否开启eslint保存检测,有效值:ture | false | "error"
  lintOnSave: false,

  // 运行时版本是否需要编译
  runtimeCompiler: true,

  // 默认babel-loader忽略mode_modules,这里可增加例外的依赖包名
  transpileDependencies: [],

  // 是否在构建生产包时生成 sourceMap 文件,false将提高构建速度
  productionSourceMap: false,

  css: {
    
    
    loaderOptions: {
    
    
      sass: {
    
    
        data: "",
      },
    },
  },

  pluginOptions: {
    
    
    // 第三方插件配置
  },

  pwa: {
    
    
    // 单页插件相关配置 https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
  },

  configureWebpack: {
    
    
    externals: {
    
    
      BMap: "BMap",
    },
  },

  chainWebpack: (config) => {
    
    
    config.resolve.alias
      // .set("@", resolve("src"))
      // .set("components", resolve("src/components"));
      .set("@", resolve("src"))
      .set("public", resolve("public"))
      .set("view", resolve("src/view"))
      .set("assets", resolve("src/assets"))
      .set("components", resolve("src/components"))
      .set("styles", resolve("src/styles"))
      .set("methods", resolve("src/methods"));
  },
  devServer: {
    
    
    open: false,
    host: "0.0.0.0",
    port: 9991,
    https: false,
    hotOnly: false,
    // proxy: null,
    proxy: {
    
    
      "/api": {
    
    
        target: "***你的接口地址***", // 生产环境
        changeOrigin: true,
        pathRewrite: {
    
    
          "^/api": "",
        },
      },
    
    },
  },
  publicPath: "./",
};

you're done

Guess you like

Origin blog.csdn.net/qq_43840793/article/details/126578914
Recommended