vueで作った Webアプリを公開する

vue createでテンプレートを作成する

こんな感じてテンプレートを作成しました。

複数ページでPWAにします。

Vue CLI v3.8.2
? Please pick a preset: Manually select features
? Check the features needed for your project:
◉ Babel
◯  TypeScript
◉ Progressive Web App (PWA) Support
◉ Router
◯ Vuex
◯ CSS Pre-processors
◉ Linter / Formatter
◯ Unit Testing
◯ E2E Testing
? Use class-style component syntax? (Y/n) Y
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? (Y/n) Y
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a linter / formatter config: (Use arrow keys)
❯ TSLint
ESLint with error prevention only
ESLint + Airbnb config
ESLint + Standard config
ESLint + Prettier
? Pick additional lint features:
❯◉ Lint on save
◉ Lint and fix on commit
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.?
In dedicated config files
❯ In package.json
? Save this as a preset for future projects? Yes
? Save preset as: test

ハマりながらも作成しました

なんせはじめてのvueだったんで、思いっきりハマりましたorz

actionってなに？

初期値って dataに入れるの？

componentって？

まぁ、こんな感じに作っていきました。

このあたりは、またいつか。。

今回は本題のコレ↓

公開しましょう！

$ npm run build

てやると、あれこれ進んで。。。。

dist/js/chunk-vendors.25696abb.js 133.58 KiB 46.22 KiB
dist/js/app.99ef83bb.js 10.14 KiB 3.28 KiB
dist/service-worker.js 0.94 KiB 0.53 KiB
dist/precache-manifest.64ddbd44ed8f68d 0.54 KiB 0.27 KiB
3475b81ee58736b9e.js

こんな感じにファイルが作成されました。

dist配下をサーバーの公開領域にコピーして、早速ブラウザか読んでみました。

http://hogehoge/aa/index.html

 

まっ白。。。。。パニック！！！！

とにかく、index.htmlをみるとcssとはjsとかが href=/css/〜とかhref=/js/〜とかになっています。

ドキュメントルートには置かないんで、さて、どうしたものか。。。

パスを指定することができます！

わかってしまえば簡単なこと。

package.jsonがおいてあるディレクトリにvue.config.jsってファイルを作成します。

その中で指定します。

module.exports = {
  publicPath: '/hoge/app/pwa',
}

今回はこんな感じ。

あらためてnpm run buildしてください。

dist配下にパスが反映されたソースが作成されます。