nuxt.config.js忘備録


```javascript:nuxt.config.js
//↓nuxt.config.jsメモ↓
//nuxt.config.jsはプロジェクト全体に適用させる設定を行う
//process.envにclient側で使用するものは書かない。※動かないから
//nuxtjs/proxyはgenerateモードでは使えない
//process.cwd()はサーバーサイドでないと有効ではない。client側では "/" が表示される。
//process.serverとprocess.clientはnuxt.config.jsでは使えない。
//クライアント側ではlocation.pathnameを使う
//process.envには関数は入れられない。""で囲まれてテキスト化される。

/* staticAssets ディレクトリ用変数 start */
import { version } from './package.json';
/* staticAssets ディレクトリ用変数 end */

/* manifest.js用のルート格納変数 start */
let myRoutesTxt = "";
/* manifest.js用のルート格納変数 end */

/* ★★★本番公開用プロジェクトの名前を設定する★★★ start */
/* 例：const productName = "project-nuxt"; */
const productName = "project-nuxt";
/* ★★★本番公開用プロジェクトの名前を設定する★★★ end */

/* ★★★本番公開用プロジェクトのルートを設定する（アップロード先）★★★ start */
/* 例：const productRoot = `/sample-path/${productName}` */
/* 末尾にスラッシュは入れない */
const productRoot = `/sample-path/${productName}`;
/* ★★★本番公開用プロジェクトのルートを設定する（アップロード先）★★★ end */

/* ★★★本番公開用プロジェクトの出力先を設定する★★★ start */
/* 例：`./${productName}` とか `../${productName}` とか `../../${productName}` 他… */
const productGenPath = `../_dist/${productName}`;
/* ★★★本番公開用プロジェクトの出力先を設定する★★★ end */

//外部モジュールのパスなど
const siteMeta = {};
siteMeta.impPath = process.env.impPath = process.env.NODE_ENV !== "production" ? "http://localhost:8888" : "";

//baseURLはproxyを使っているときは使えない。その時は接頭辞の「prefix」を使う。
const axiosHost = process.env.NODE_ENV !== "production" ? { prefix: "" } : { baseURL: "" };

export default {

    loading: process.env.NODE_ENV !== "production" ? true : false,
    target: 'static',
    mode: "univarsal",
    srcDir: "app",

    //環境変数の設定(公開用)
    publicRuntimeConfig: {
        staticRoot: productRoot,
    },
    //環境変数の設定(非公開用)
    privateRuntimeConfig: {
        secret: null
    },

    // Build Configuration(https://go.nuxtjs.dev/config-build)
    build: {
        // transpile: [/^element-ui/],//element-ui設定
        extend(config, { isDev, isClient, loaders }) {//webpack設定
            config.output.jsonpFunction = 'webpackLoad';//既存のwebpackグローバル変数との重複を避ける
            const HardSourceWebpackPlugin = require('hard-source-webpack-plugin')
            config.plugins.push(new HardSourceWebpackPlugin());
            loaders.imgUrl.limit = 10000;
        },
        //_nuxt以下に入るファイル(build対象)
        filenames: {
            app: () => 'app/[id].js',
            chunk: () => 'chunk/[id].js',
            css: () => 'css/[id].js',
        },
        parallel: true,
        cache: true,
        hardsource: true,
    },

    // ルーティングの設定
    router: {
        // trailingSlash: true,
        //プロジェクトのルートパス
        base: process.env.NODE_ENV !== 'production' ? '/' : productRoot,
        middleware: ["util-route"],
        extendRoutes(routes, resolve) {
            // 自作manifest.jsの作成
            routes.forEach((route, idx) => {
                if (idx == 0) {
                    myRoutesTxt += `"${route.path}"`;
                }
                else {
                    myRoutesTxt += `,"${route.path}"`;
                }
            });
        }
    },

    // generateの設定
    generate: {
        //distの出力先
        dir: productGenPath,
        crawler: false,
        // fallback: '404.html',
        //動的なパスの際に対応
        routes() {
            // 配列で返す必要がある

            const states = require('./_env-my-app/route-state.js').default;
            return [].concat(
                states.map(state => {
                    const setRoute = `/sample-path/${state}`;
                    if (myRoutesTxt == "") {
                        myRoutesTxt += `"${setRoute}"`;
                    }
                    else { myRoutesTxt += `,"${setRoute}"`; }
                    return `${setRoute}/`;
                }),
                states.map(state => {
                    const setRoute = `/sample-path/${state}`;
                    if (myRoutesTxt == "") {
                        myRoutesTxt += `"${setRoute}"`;
                    }
                    else { myRoutesTxt += `,"${setRoute}"`; }
                    return `${setRoute}/`;
                })
            );

        },
        done() {
            if (process.env.MY_CLUSTER) {
                const content_manifest = `__NUXT_JSONP__("manifest.js",{routes:[${myRoutesTxt}]})`;
                const fs = require('fs');
                fs.writeFile(`${productGenPath}/_nuxt/static/${version}/manifest.js`, content_manifest, function (err) {
                    if (err) {
                        console.log("自作のmanifest.jsの作成に失敗しました")
                        throw err;
                    }
                    console.log('自作のmanifest.jsが作成されました');
                });
            }
            else {
                console.log("clusterによるgenerateではありません");
            }
        },
        staticAssets: {
            version
        },
    },

    // Axios module configuration(https://go.nuxtjs.dev/config-axios)
    axios: axiosHost,

    proxy: {
        '/api': {
            target: 'http://localhost:3030',
            // pathRewrite: {
            // '^/api': ''
            // }
        },
        '/sample-path': {
            target: 'http://localhost:8888',
            // pathRewrite: {
            //'^http://localhost:8888': ''
            // }
        }
    },

    // Global page headers (https://go.nuxtjs.dev/config-head)
    head: {
        base: {
            // href: process.env.NODE_ENV
            //     !== 'production' ? 'localhost:8888/' : `/`,
            // src: process.env.NODE_ENV !==
            //     'production' ? 'localhost:8888/' : `/`,
        },
        meta: [
            { charset: "utf-8" },
            { name: 'viewport', content: 'width=device-width, initial-scale=1' },
            { name: "Targeted Geographic Area", content: "Japan" },
            { name: "coverage", content: "Japan" },
            { name: "rating", content: "general" },
            { name: "content-language", content: "ja" },
            { name: "format-detection", content: "telephone=no" },
        ],
        link: [],
        script: [
            // pbody…body直後, body…bodyタグ内の後部
            //body:true or false, pbody: true or false, mode:"client"
            //{src:'https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'},
        ]
    },

    //グローバルに適用させるCSSの設定
    css: [
        '~/assets/scss/style.scss',
    ],

    // Plugins to run before rendering page (https://go.nuxtjs.dev/config-plugins)
    plugins: [
        '@/plugins/axios-log',
        '@/plugins/axios-conf',
        '@/plugins/gen-static-root',
        '@/plugins/siteMeta',
        '@/plugins/window-resize',
    ],

    // Auto import components (https://go.nuxtjs.dev/config-components)
    components: true,

    // Modules for dev and build (recommended) (https://go.nuxtjs.dev/config-modules)
    buildModules: [
    ],

    // Modules (https://go.nuxtjs.dev/config-modules)
    modules: [
        // https://go.nuxtjs.dev/axios
        '@nuxtjs/axios',
        '@nuxtjs/proxy',
        '@nuxtjs/style-resources',
        '@nuxtjs/redirect-module',
        ['vue-scrollto/nuxt', { duration: 300 }]
    ],

    redirect: [
        {
            from: '^(\\/[^\\?]*[^\\/])(\\?.*)?$',
            to: '$1/$2',
            statusCode: 301
        }
    ],

    //コンポーネントからでも使えるscssを設定
    styleResources: {
        scss: []
    },

}
```