Open2021/12/10にコメント追加2

Vite×Vue3で詰まったところ

vue.config.js ではなく、vite.config.js で、json-server を立てる

Vite経由でVue3の環境構築をした時、vue.config.jsは無く、代わりにvite.config.jsが存在していた。

vite.config.js(デフォルト)

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
})

詰まった部分
json-serverを立てようと、vue.config.jsに下記のように設定していたが動かなかった。

vue.config.js

module.exports = {
  devServer: {
    proxy: {
      '^/api': {
        target: 'http://localhost:5000',
      }
    }
  }
}

これはおそらくだが、デフォルトで既にvite.config.jsが存在しているため、そちらでserverを立てろ、ということなのかなと思い、vite.config.jsで下記のように設定した。

vite.config.js(json-server設定後)

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  server: {
    proxy: {
      '^/api': {
        target: 'http://localhost:5000',
        changeOrigin: true,
        rewrite: (path) => path.replace('/api', '/')
      }
    }
  }
})

結果、動いた。多分 vite.config.js の plugins: [vue()],でvue.config.jsの設定とかもできるのだろうけど、ちょっと追いついていない。

kageyama

viteを使ってる場合、vue-routerのcreateRouter()の中でprocess.envが使えない。そのため

xxx.js

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes
})
export default router

と言うように、vite経由でURLを持っていく必要がある。