Q&A
質問内容
提示コードですが参考サイトを参考にコマンドを実行してプログラムをブラウザ上で実行したいのですが以下エラーが出る原因がわかりません。
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件
0
ベストアンサー
コマンド: 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
総合スコア44
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。