【Nuxt.js】サブディレクトリをBaseURLにする方法
Nuxt.js のgenerateコマンドで作成した静的ページを、phpで作ったサイトと共存させることになり、サブディレクトリ（今回はhttp://example.com/nuxt_dir/）内に配置する際にやったことを紹介します。
1. .envを使用できる様にする
詳細はこちらが参考になれば：
＊dotenvモジュールをインストール
npmで管理してる場合
npm install @nuxtjs/dotenv
yarnで管理してる場合
yarn add @nuxtjs/dotenv
＊nuxt.config.jsに設定を記載(赤文字部分を追加)
require('dotenv').config()
export default {
/* 略 */
buildModules: [
'@nuxtjs/dotenv'
],/* 略 */
}
＊ .envファイルを作成し、配置するサブディレクトリ（今回は/nuxt_dir/）用の定数を記載
BASE_URL = /nuxt_dir
2. nuxt.config.jsに赤文字部分を記載（linkやscriptでBaseUrl配下を参照するものにもprocess.env.BASE_URL を記載）
require('dotenv').config()
export default {
mode: "universal",
router: {
base: process.env.BASE_URL || "",
},
head: {
title: process.env.npm_package_name || "",
base: {
href: process.env.BASE_URL
},
link: [
{ rel: "icon", type: "image/x-icon", href: process.env.BASE_URL + "/favicon.ico" }
],
script: [{ src: process.env.BASE_URL + "/menu.js" }
],
}
ローカルで開発行う場合は、.env内のBASE_URL＝''にしておくと、localhost:3000直下でページが表示されます。
3. npm run generateで静的ページを作成
npm run generate または yarn generate
上記コマンドで、/dist 内に静的ページが作成されます。試しに/dist/index.htmlを確認してみると、
<!doctype html>
<html data-n-head-ssr>
<head>
<title>Home</title>// 略
<link data-n-head="ssr" rel="icon" type="image/x-icon" href="/nuxt_dir/favicon.ico"><script data-n-head="ssr" src="/nuxt_dir/menu.js"></script>
<base href="/nuxt_dir/">
// 略
</head>
<body><a href="/nuxt_dir/page2">page2</a>
</body>
</html>
nuxt.config.jsで定義したheadタグ内部も、/nuxt_dir というサブディレクトリが記載されて生成され、
bodyタグ内部も/nuxt_dir というサブディレクトリが記載されて生成されていることがわかります。（aタグ部分は、pages/index.vueでは<nuxt-link to="/page2">page2</nuxt-link>と記載されています）
4. /dist内の静的ファイル全てを、サーバのサブディレクトリ内（今回の場合、http://example.comサーバの/nuxt_dirディレクトリ内）に配置
以上ですー！！
Nuxtはgenerateコマンドで、普通のhtmlとして使える静的ファイルを吐き出してくれるので、とっても便利！！
おやすみなさい
