teratail
回答率
85.47%
質問するログイン新規登録
トップHTML5に関する質問vite buildコマンドを実行すると出力ファイルでパスがおかしくなる原因が知りたい

編集履歴

質問編集履歴

10

タイトルと文章を修正

2023/04/06 05:21

投稿

amagami
amagami

スコア14

test CHANGED
@@ -1 +1 @@
1
- npmを利用したTypescirptでvue.jsを利用したvite build後の実行エラーの対処方法が知りたい
1
+ vite buildコマンドを実行すると出力ファイルでパスがおかしくなる原因が知りたい
test CHANGED
@@ -1,15 +1,17 @@
1
1
  ##### 質問内容
2
2
  提示コードですが参考サイトを参考にコマンドを実行してプログラムをブラウザ上で実行したいのですが以下エラーが出る原因がわかりません。
3
- `vite build`してるの以下の`ErrorA`や`ErrorB`のような出ることの原因を含めこの場合どうしたらいいのでしょうか？　参考サイトを参考にしていますが対処方法がわかりません。
3
+ `vite build`を行うと以下のパスがおかしくなる原因がわかりません。参考サイトを参考にしていますが対処方法がわかりません。
4
4
 
5
5
 
6
6
  ##### 知りたいこと
7
- vite build後のエラーの対処方法が知りたい
7
+ vite build後のパスがおかしくなる原因が知りたい
8
+ `<script type="module" crossorigin src="/assets/index-489c85a3.js"></script>`部の`src="/"`です。
9
+ `src="./"`のようにドットを追加するにはどうしたらいいのでしょうか？
8
10
 
9
11
 
10
12
  ##### 試したこと
11
13
  1,まず。以下の提示コードを`npx tsc `して`vute build`して`index.html`を開いたところ
12
- ErrorAのエラーが発生しました(`buildされたindex.html ` 提示コード参考)　そこで`<head>`タグの`<script>`タグの内部のsrc指定のパスがおかしいことに気づき`src=/`を`src=./`に変更したところErrorBのようなエラーが出ました。
14
+ ErrorAのエラーが発生しました(`buildされたindex.html ` 提示コード参考)　そこで`<head>`タグの`<script>`タグの内部のsrc指定のパスがおかしいことに気づき`src=/`を`src=./`に変更したところエラーが消えました。
13
15
 
14
16
  2, `npm init vue@latest`コマンドによる自動生成のプロジェクトによる実行も試しましたが同じエラーが出ます。
15
17
 
@@ -24,14 +26,6 @@
24
26
  ##### Error A
25
27
  ```
26
28
  GET http://127.0.0.1:5500/assets/index-489c85a3.js net::ERR_ABORTED 404 (Not Found)
27
- ```
28
-
29
- ##### Error B
30
- ```
31
- Uncaught ReferenceError: require is not defined
32
- at index-489c85a3.js:1:842
33
- at index-489c85a3.js:1:22
34
- at index-489c85a3.js:1:944
35
29
  ```
36
30
 
37
31
 
HTML5TypeScript

9

文章を修正

2023/04/06 05:09

投稿

amagami
amagami

スコア14

test CHANGED
File without changes
test CHANGED
@@ -46,7 +46,7 @@
46
46
 
47
47
  ##### 参考サイト
48
48
  クリックスタート : https://ja.vuejs.org/guide/quick-start.html#creating-a-vue-application
49
-
49
+ viteだとrequire()が使えない: https://azukiazusa.dev/blog/vite-require/
50
50
  ##### index.html
51
51
  ```html
52
52
  <html>
HTML5TypeScript

8

タイトルを文章を修正

2023/04/06 05:05

投稿

amagami
amagami

スコア14

test CHANGED
@@ -1 +1 @@
1
- Typescriptでvue.jsを実行する方法が知りたい
1
+ npmを利用したTypescirptでvue.jsを利用したvite build後の実行エラーの対処方法が知りたい
test CHANGED
@@ -1,86 +1,112 @@
1
1
  ##### 質問内容
2
- 提示のエラーですが`Typescirpt`で`vue.js`を使うと`import`文に記述した際に発生します。
2
+ 提示コードですが参考サイトを参考にコマンドを実行してプログラムをブラウザ上で実行したいのですが以下エラーが出る原因がわかりません。
3
- エラーコードの通りなのですがこれは何を意味するのでしょうか？
3
+ `vite build`してるの以下の`ErrorA`や`ErrorB`のような出ることの原因を含めこの場合どうしたらいいのでしょうか？　参考サイトを参考にしていますが対処方法がわかりません。
4
+
4
5
 
5
6
  ##### 知りたいこと
6
- vue.jsをTypescriptで実行する方法が知りたい
7
+ vite build後のエラーの対処方法が知りたい
8
+
9
+
7
10
  ##### 試したこと
11
+ 1,まず。以下の提示コードを`npx tsc `して`vute build`して`index.html`を開いたところ
12
+ ErrorAのエラーが発生しました(`buildされたindex.html ` 提示コード参考)　そこで`<head>`タグの`<script>`タグの内部のsrc指定のパスがおかしいことに気づき`src=/`を`src=./`に変更したところErrorBのようなエラーが出ました。
8
13
 
9
- 1,プロジェクトを作り直し以下のコマンドを実行
10
- 2,エラーコードの通り`./`を試しました。
11
- 3,tsconfig:`"module": "commonjs"`をコメントアウト ErrorA
12
- 4,tsconfig:`"module": "commonjs"`をコメントアウトしなかった場合のエラー ErrorB
14
+ 2, `npm init vue@latest`コマンドによる自動生成のプロジェクトによる実行も試しましたが同じエラーが出ます。
13
- ５，以下のクイックスタートを参考にプロジェクトを作ってブラウザで表示させるとエラーAのエラーになります。
14
- ##### 環境
15
- OS ubuntu
16
- node,Typescript,html5
17
15
 
18
- ##### 参考サイト
16
+
19
- 参考サイト：https://ja.vuejs.org/guide/typescript/overview.html
20
- クイックスタート：https://ja.vuejs.org/guide/quick-start.html
21
- ##### ErrorA
22
- ```
23
- Uncaught TypeError: Failed to resolve module specifier "vue". Relative references must start with either "/", "./", or "../".
24
- ```
25
- ##### ErrorB
26
- ```
27
- script.js:11 Uncaught ReferenceError: exports is not defined
28
- at script.js:11:23
29
- ```
30
17
 
31
18
  ##### 実行したコマンド
32
19
  ```
33
- npm install -g typescript
34
- npm install bootstrap
35
- npm install vue
20
+ npx tsc
21
+ vite build
22
+ ```
36
23
 
37
- npx tsc -w
24
+ ##### Error A
25
+ ```
26
+ GET http://127.0.0.1:5500/assets/index-489c85a3.js net::ERR_ABORTED 404 (Not Found)
27
+ ```
28
+
29
+ ##### Error B
30
+ ```
31
+ Uncaught ReferenceError: require is not defined
32
+ at index-489c85a3.js:1:842
33
+ at index-489c85a3.js:1:22
34
+ at index-489c85a3.js:1:944
38
35
  ```
39
36
 
40
37
 
38
+
39
+
40
+ ##### 環境
41
+ OS: ubuntu
42
+ 言語: Typescript,html5,scss
43
+ 利用ツール: npm
44
+ ブラウザ: google chrome (vscodeの拡張機能live serverを利用)
45
+
46
+
47
+ ##### 参考サイト
48
+ クリックスタート : https://ja.vuejs.org/guide/quick-start.html#creating-a-vue-application
49
+
41
- ##### index.hml
50
+ ##### index.html
42
51
  ```html
43
- <!DOCTYPE html>
52
+ <html>
44
- <html lang="ja">
45
53
  <head>
46
- <!-- Required meta tags -->
47
- <meta charset="utf-8">
48
- <meta name="viewport" content="width=device-width, initial-scale=1">
49
-
50
- <!-- Bootstrap CSS -->
51
-
52
- <link rel="stylesheet" href="style.css">
53
- <title>Hello, world!</title>
54
+ <title>test</title>
54
55
  </head>
55
56
 
56
- <body>
57
+ <body>
58
+
59
+ <div id="app">
60
+
61
+ <h3>{{ message }}</h3>
62
+ </div>
63
+
64
+
65
+ <script>var exports = {};</script>
66
+ <script type="module" src="./script.js"></script>
67
+ </body>
68
+ </html>
69
+ ```
70
+
71
+ ##### script.ts
72
+ ```ts
73
+ import { createApp } from 'vue'
74
+
75
+ createApp({
76
+ data() {
77
+ return {
78
+ message: 'Hello Vue!'
79
+ }
80
+ }
81
+ }).mount('#app')
82
+ ```
83
+
84
+ ##### buildされたindex.html
85
+ ```html
86
+ <html>
87
+ <head>
88
+ <title>test</title>
89
+ <script type="module" crossorigin src="/assets/index-489c85a3.js"></script>
90
+ </head>
91
+
92
+ <body>
93
+
94
+ <div id="app">
95
+
96
+ <h3>{{ message }}</h3>
97
+ </div>
57
98
 
58
99
 
59
100
 
60
101
 
61
102
 
103
+
104
+ <script>var exports = {};</script>
105
+
62
106
  </body>
63
-
64
- <script type="module" src="./script.js"></script>
65
- </body>
66
107
  </html>
67
108
  ```
68
109
 
69
- ##### script.ts
70
- ```ts
71
110
 
72
111
 
73
- import { createApp } from 'vue'
74
112
 
75
- createApp({
76
- data() {
77
- return {
78
- count: 0
79
- }
80
- }
81
- }).mount('#app')
82
-
83
-
84
- ```
85
-
86
-
HTML5TypeScript

7

文章を修正

2023/04/06 03:51

投稿

amagami
amagami

スコア14

test CHANGED
@@ -1 +1 @@
1
- Typescriptでvue.jsを導入したい。
1
+ Typescriptでvue.jsを実行する方法が知りたい
test CHANGED
@@ -2,22 +2,22 @@
2
2
  提示のエラーですが`Typescirpt`で`vue.js`を使うと`import`文に記述した際に発生します。
3
3
  エラーコードの通りなのですがこれは何を意味するのでしょうか？
4
4
 
5
- 打ち消し線
6
5
  ##### 知りたいこと
7
- vue.jsのインポート文を記述した際の以下のエラーの対処方法が知りたい
6
+ vue.jsをTypescriptで実行する方法が知りたい
7
+ ##### 試したこと
8
8
 
9
- ##### 試したこと
10
9
  1,プロジェクトを作り直し以下のコマンドを実行
11
10
  2,エラーコードの通り`./`を試しました。
12
11
  3,tsconfig:`"module": "commonjs"`をコメントアウト ErrorA
13
12
  4,tsconfig:`"module": "commonjs"`をコメントアウトしなかった場合のエラー ErrorB
13
+ ５，以下のクイックスタートを参考にプロジェクトを作ってブラウザで表示させるとエラーAのエラーになります。
14
14
  ##### 環境
15
15
  OS ubuntu
16
16
  node,Typescript,html5
17
17
 
18
18
  ##### 参考サイト
19
19
  参考サイト：https://ja.vuejs.org/guide/typescript/overview.html
20
-
20
+ クイックスタート：https://ja.vuejs.org/guide/quick-start.html
21
21
  ##### ErrorA
22
22
  ```
23
23
  Uncaught TypeError: Failed to resolve module specifier "vue". Relative references must start with either "/", "./", or "../".
HTML5TypeScript

6

タイトルを修正

2023/04/06 03:43

投稿

amagami
amagami

スコア14

test CHANGED
@@ -1 +1 @@
1
- Typescriptでvue.jsをimportするとエラーが出る原因が知りたい
1
+ Typescriptでvue.jsを導入したい。
test CHANGED
File without changes
HTML5TypeScript

5

文章を修正

2023/04/06 02:21

投稿

amagami
amagami

スコア14

test CHANGED
File without changes
test CHANGED
@@ -16,7 +16,7 @@
16
16
  node,Typescript,html5
17
17
 
18
18
  ##### 参考サイト
19
- https://stackoverflow.com/questions/52612446/importing-a-package-in-es6-failed-to-resolve-module-specifier-vue
19
+ 参考サイト：https://ja.vuejs.org/guide/typescript/overview.html
20
20
 
21
21
  ##### ErrorA
22
22
  ```
HTML5TypeScript

4

文章を修正

2023/04/06 01:49

投稿

amagami
amagami

スコア14

test CHANGED
@@ -1 +1 @@
1
- [vue.js] Error: Uncaught TypeError: Failed to resolve module specifier "vue"原因が知りたい
1
+ Typescriptでvue.jsをimportするとエラーが出る原因が知りたい
test CHANGED
@@ -7,34 +7,33 @@
7
7
  vue.jsのインポート文を記述した際の以下のエラーの対処方法が知りたい
8
8
 
9
9
  ##### 試したこと
10
- 1,参考サイトのような方法が存在しますが自分は`npm install` を行ったのでその方法での実装方法が知りたいです。
10
+ 1,プロジェクトを作り直し以下のコマンドを実行
11
11
  2,エラーコードの通り`./`を試しました。
12
-
12
+ 3,tsconfig:`"module": "commonjs"`をコメントアウト ErrorA
13
+ 4,tsconfig:`"module": "commonjs"`をコメントアウトしなかった場合のエラー ErrorB
13
14
  ##### 環境
14
15
  OS ubuntu
15
16
  node,Typescript,html5
16
17
 
17
-
18
-
19
18
  ##### 参考サイト
20
19
  https://stackoverflow.com/questions/52612446/importing-a-package-in-es6-failed-to-resolve-module-specifier-vue
21
20
 
22
-
23
- ##### Error
21
+ ##### ErrorA
24
22
  ```
25
23
  Uncaught TypeError: Failed to resolve module specifier "vue". Relative references must start with either "/", "./", or "../".
26
24
  ```
27
-
28
- ###### 日本語訳
25
+ ##### ErrorB
29
26
  ```
30
- キャッチされていない TypeError: モジュール指定子 "vue" の解決に失敗しました。 相対参照は、"/"、"./"、または "../" のいずれかで始まる必要があります。
27
+ script.js:11 Uncaught ReferenceError: exports is not defined
28
+ at script.js:11:23
31
29
  ```
32
30
 
33
31
  ##### 実行したコマンド
34
32
  ```
33
+ npm install -g typescript
34
+ npm install bootstrap
35
35
  npm install vue
36
- npm install vue-router
36
+
37
- npm install @vue/devtools-api
38
37
  npx tsc -w
39
38
  ```
40
39
 
HTML5TypeScript

3

文章を修正

2023/04/06 01:08

投稿

amagami
amagami

スコア14

test CHANGED
File without changes
test CHANGED
@@ -14,6 +14,8 @@
14
14
  OS ubuntu
15
15
  node,Typescript,html5
16
16
 
17
+
18
+
17
19
  ##### 参考サイト
18
20
  https://stackoverflow.com/questions/52612446/importing-a-package-in-es6-failed-to-resolve-module-specifier-vue
19
21
 
@@ -28,9 +30,12 @@
28
30
  キャッチされていない TypeError: モジュール指定子 "vue" の解決に失敗しました。 相対参照は、"/"、"./"、または "../" のいずれかで始まる必要があります。
29
31
  ```
30
32
 
31
- ##### npm
33
+ ##### 実行したコマンド
32
34
  ```
33
35
  npm install vue
36
+ npm install vue-router
37
+ npm install @vue/devtools-api
38
+ npx tsc -w
34
39
  ```
35
40
 
36
41
 
HTML5TypeScript

2

文章を修正

2023/04/06 00:51

投稿

amagami
amagami

スコア14

test CHANGED
File without changes
test CHANGED
@@ -1,16 +1,18 @@
1
1
  ##### 質問内容
2
2
  提示のエラーですが`Typescirpt`で`vue.js`を使うと`import`文に記述した際に発生します。
3
+ エラーコードの通りなのですがこれは何を意味するのでしょうか？
3
4
 
4
5
  打ち消し線
5
6
  ##### 知りたいこと
6
7
  vue.jsのインポート文を記述した際の以下のエラーの対処方法が知りたい
7
8
 
8
9
  ##### 試したこと
9
- 参考サイトのような方法が存在しますが自分は`npm install` を行ったのでその方法での実装方法が知りたいです。エラーコードの通り./を試しました。
10
+ 1,参考サイトのような方法が存在しますが自分は`npm install` を行ったのでその方法での実装方法が知りたいです。
11
+ 2,エラーコードの通り`./`を試しました。
10
12
 
11
13
  ##### 環境
12
14
  OS ubuntu
13
- Typescript,html5
15
+ node,Typescript,html5
14
16
 
15
17
  ##### 参考サイト
16
18
  https://stackoverflow.com/questions/52612446/importing-a-package-in-es6-failed-to-resolve-module-specifier-vue
@@ -20,6 +22,7 @@
20
22
  ```
21
23
  Uncaught TypeError: Failed to resolve module specifier "vue". Relative references must start with either "/", "./", or "../".
22
24
  ```
25
+
23
26
  ###### 日本語訳
24
27
  ```
25
28
  キャッチされていない TypeError: モジュール指定子 "vue" の解決に失敗しました。 相対参照は、"/"、"./"、または "../" のいずれかで始まる必要があります。
HTML5TypeScript

1

文章を修正

2023/04/05 23:45

投稿

amagami
amagami

スコア14

test CHANGED
File without changes
test CHANGED
@@ -6,7 +6,7 @@
6
6
  vue.jsのインポート文を記述した際の以下のエラーの対処方法が知りたい
7
7
 
8
8
  ##### 試したこと
9
- 参考サイトのような方法が存在しますが自分は`npm install` を行ったのでその方法での実装方法が知りたいです。
9
+ 参考サイトのような方法が存在しますが自分は`npm install` を行ったのでその方法での実装方法が知りたいです。エラーコードの通り./を試しました。
10
10
 
11
11
  ##### 環境
12
12
  OS ubuntu
HTML5TypeScript