axios 中 使用 paramsSerializer ，vite 编译后报错 querystring.encode is not a function

Question

import axios from 'axios/dist/axios'
import querystring from 'querystring/index.js'

const instance = axios.create({
  timeout: 10000,
  paramsSerializer: (params) => querystring.encode(params)
})

...

export default defineConfig({
  build: {
    target: 'es2021',
    assetsDir: 'assets',
    rollupOptions: {
      external: [
        'axios',
        'querystring'
      ]
    }
  }
})
...

{
  "name": "simple vite",
  "version": "1.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "serve": "vite preview"
  },
  "dependencies": {
    "amfe-flexible": "^2.2.1",
    "ant-design-vue": "3.0.0-alpha.9",
    "axios": "^0.24.0",
    "echarts": "^5.2.2",
    "js-cookie": "^3.0.1",
    "moment": "^2.29.1",
    "store": "^2.0.12",
    "vant": "^3.2.8",
    "vue": "^3.2.16",
    "vue-i18n": "^9.1.7",
    "vue-router": "^4.0.12",
    "vuex": "^4.0.2"
  },
  "devDependencies": {
    "@rollup/plugin-commonjs": "^21.0.1",
    "@rollup/plugin-node-resolve": "^13.1.2",
    "@vitejs/plugin-vue": "^1.9.3",
    "eslint": "^8.2.0",
    "eslint-config-standard": "^16.0.3",
    "eslint-plugin-import": "^2.25.2",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-promise": "^5.1.1",
    "postcss-pxtorem": "^6.0.0",
    "querystring": "^0.2.1",
    "sass": "^1.43.4",
    "vite": "^2.7.10",
    "vite-plugin-style-import": "^1.3.0"
  }
}

Answer 1

提问者 gongyangxu 2022-01-04 18:11:28

改成引用 qs 请求参数序列化 。npm run dev 能正常请求api接口并返回数据， build 之后 返回的是一段 html 字符串

import axios from 'axios/dist/axios'

import qs from 'qs/dist/qs'

const instance = axios.create({

    timeout: 10000,

    paramsSerializer: (params) => qs.stringify(params, {indices: false})

});

"axios": "^0.24.0",

"qs": "^6.10.2",

• Jokcy #1

  queryString 没有 default export吧。华硕你为什么要从`axios/dist/axios`引入，为什么不直接'axios'？