vite buildコマンドを実行すると出力ファイルでパスがおかしくなる原因が知りたい

質問内容

提示コードですが参考サイトを参考にコマンドを実行してプログラムをブラウザ上で実行したいのですが以下エラーが出る原因がわかりません。
vite buildを行うと以下のパスがおかしくなる原因がわかりません。参考サイトを参考にしていますが対処方法がわかりません。

知りたいこと

vite build後のパスがおかしくなる原因が知りたい
<script type="module" crossorigin src="/assets/index-489c85a3.js"></script>部のsrc="/"です。
src="./"のようにドットを追加するにはどうしたらいいのでしょうか？

試したこと

1,まず。以下の提示コードをnpx tsc してvute buildしてindex.htmlを開いたところ
ErrorAのエラーが発生しました(buildされたindex.html 提示コード参考)　そこで<head>タグの<script>タグの内部のsrc指定のパスがおかしいことに気づきsrc=/をsrc=./に変更したところエラーが消えました。

2, npm init vue@latestコマンドによる自動生成のプロジェクトによる実行も試しましたが同じエラーが出ます。

実行したコマンド

npx tsc
vite build

Error A

GET http://127.0.0.1:5500/assets/index-489c85a3.js net::ERR_ABORTED 404 (Not Found)

環境

OS: ubuntu
言語: Typescript,html5,scss
利用ツール: npm
ブラウザ: google chrome (vscodeの拡張機能live serverを利用)

参考サイト

クリックスタート : https://ja.vuejs.org/guide/quick-start.html#creating-a-vue-application
viteだとrequire()が使えない: https://azukiazusa.dev/blog/vite-require/

index.html

html
1<html>
2    <head>
3        <title>test</title>
4    </head>
5
6    <body>
7
8        <div id="app">
9
10            <h3>{{ message }}</h3>
11        </div>
12
13
14        <script>var exports = {};</script>
15        <script type="module" src="./script.js"></script>
16    </body>
17</html>

script.ts

ts
1import { createApp } from 'vue'
2
3createApp({
4    data() {
5      return {
6        message: 'Hello Vue!'
7      }
8    }
9  }).mount('#app')

buildされたindex.html

html
1<html>
2    <head>
3        <title>test</title>
4      <script type="module" crossorigin src="/assets/index-489c85a3.js"></script>
5    </head>
6
7    <body>
8
9        <div id="app">
10
11            <h3>{{ message }}</h3>
12        </div>
13
14
15
16
17
18
19        <script>var exports = {};</script>
20        
21    </body>
22</html>

行動規範の内容に同意します

回答1件

ベストアンサー

コマンド: vite build --base './'
もしくは、vite.config.jsにbaseオプション設定

https://ja.vitejs.dev/config/shared-options.html#base
https://ja.vitejs.dev/guide/cli.html#%E3%83%92%E3%82%99%E3%83%AB%E3%83%88%E3%82%99

投稿2023/04/08 16:48

yukihide1188

総合スコア44

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.29%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する