vite.config.js configuration - solve cross-domain problems, and @vitejs/plugin-vue and other errors

development environment

In the process of configuration, I stepped on a lot of pitfalls, and I was still too good, and I couldn't figure out what it meant for some things.

For the error report when running the project, you can go directly to the bottom to see the comments of the vite.config.js file

At present, there are not many modules used in the project, and the package.json file is as follows

{
  "name": "PsWebV3Abb",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build"
  },
  "dependencies": {
    "@vitejs/plugin-vue": "^1.0.0",
    "axios": "^1.2.1",
    "element-plus": "^2.2.26",
    "vite": "^4.0.3",
    "vue": "^3.0.4",
    "vue-router": "^4.1.5"
  },
  "devDependencies": {
    "@vue/compiler-sfc": "^3.0.4"
  }
}

In fact, the main issue is the version compatibility of these modules.

The version of vite was 1.0.0 at the beginning, and I uninstalled and reinstalled the new version after I couldn’t do it in many places.

Of course, it is recommended to read the official documents carefully. In fact, many important points are clearly explained, but you will only notice when you encounter problems. For official documents, please move here

Let's briefly talk about this file,

The first is the location of the file, it is invalid to put it in other locations:

        

When running the vite project, it will automatically parse the file under the root directory

My main purpose here is to solve the cross-domain problem when the project is running

The following is an encapsulated simple request example, where service is an encapsulated axios instance, you can specify the baseurl, as well as request and response interception.

Other APIs can be implemented like this by adding methods to getItem

import service from '../utils/requests.js'

const getItem = {}

getItem.getppitem = function (params) {
  return service.get('api/AutoSimple/getdata', params)
}

export default getItem

The specific configuration of vite.config.js is as follows

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// import eslintPlugin from 'vite-plugin-eslint'
// https://vitejs.dev/config/

// 这个配置文件可能出现的问题：
// 首先是此文件放置的位置
// 1.未安装 @vitejs/plugin-vue
// 处理方法：npm i @vitejs/[email protected]
// 由于本项目vite版本1.0限制，只能用了plugin-vue的1.0.0版本,但在运行的时候又导致了问题2，
// 于是直接卸载vite重新安装最新的3.0.4,这个版本直接install plugin-vue仍然不行，还是要用1.0.0版本
// 2.显示不存在函数 defineConfig
// 在此之后npm run dev,又报了一个错：Cannot find module 'node:path'
// 在掘金上看到是和node版本有关，更新后就可以正常运行了

export default defineConfig({
  plugins: [
    vue()
    // 检查代码格式
    // eslintPlugin({
    //   include: ['src/**/*.js', 'src/**/*.vue', 'src/*.js', 'src/*.vue']
    // })
  ],
  server: {
    // 默认打开的端口和本地
    // host: '0.0.0.0',
    port: 3000,
    https: false, // 不支持https
    proxy: {
      '/api': {
        target: 'http://10.200.20.80/BARCODESERVICE',	// 实际请求地址
        changeOrigin: true, // 是否跨域
        rewrite: (path) => path.replace(/^\/api/, '') // 对什么类的服务器匹配
      },
    }
  }
})

Production Environment

When deploying the production environment, I encountered two more problems:

1. Problems with public paths

The customer environment is an IIS server. In order to save ports, we choose to add multiple applications under the same website during deployment, which makes it necessary to add a public basic path during deployment. This is detailed in the official document instruction of.

 

solution:

Configure in package.json

"scripts": {
    "dev": "vite",
    "build": "vite build --base=/PsWebDand/ "
  }

2. Cross-domain invalid problem

The proxy of the server in vite.config.js is invalid. At this time, the cross-domain problem needs to be solved by configuring it in the backend service

IIS server

<httpProtocol>
      <customHeaders>
                <add name="Access-Control-Allow-Headers    " value="Content-Type,api_key,Authorization" />
                <add name="Access-Control-Allow-Methods" value="GET,POST,PUT,DELETE,OPTIONS" />
                <add name="Access-Control-Allow-Origin" value="*" />
      </customHeaders>
</httpProtocol>