vue-cli3のセットアップと開発サーバ起動からバンドルファイル生成まで

スポンサーリンク




スポンサーリンク

概要

Vue.jsで作ったアプリをGitHub Pagesで公開する方法について。

検証環境

nodejs 11.10.0

npm 6.7.0

vue@cli 3.4.0

nodejsとnpmの導入については省略します。

vue@cliの導入

vue@cliを導入します。

npm install @vue/cli -g

今回の場合はグローバルにインストールしています。

vueプロジェクトの作成

上記のインストールが完了すると、vueコマンドが使えるようになります。

ここで、サンプルプロジェクトを作ります。

vue create sampleproject
cd sampleproject

開発サーバを起動してhttp://localhost:8080から確認をすることができます。

npm run server

本番用ビルドは

npm run build

でおこなうことができます。

開発・本番ビルドの設定

上記のビルドの際の設定はプロジェクトディレクトリのルート直下にvue.config.jsを置いておくと便利です。

各項目の設定

module.outputDir
バンドルファイル生成時に吐かれるディレクトリのパス。デフォルトではdist。

module.publicPath
バンドルファイルのjsやcssのパス。デフォルトではルートであるため、バンドルファイルが呼ばれるHTMLファイルをドキュメントルートのサブディレクトリの下におく場合は相対パスの方が良いと思う。

module.configureWebpack.resolve.alias.vue$
開発モードで起動時に、これを設定しておかないとテンプレートが読み込まれない。
詳しくは
How to configure Vue CLI 3 to leverage webpack root folder aliases?

module.exports = {
  outputDir:'docs',
  publicPath: './',
  configureWebpack: {
    resolve: {
      alias: {
        "vue$": 'vue/dist/vue.esm.js'
      }
    }
  }
}

参考

vue-cli 3.0で始めるPWAとVue.jsのconfig周り
みなさん、Vue.jsやってますか?僕はバリバリです(?) 最近vue-cliの3系が出て、npmもvue-cliから@vue/cliに変わりましたね。導入からディレクトリ構成も結構変わりました(webpack.configがないとか)。 大きな変更点として、webpack4系の対応と、template形式からpl...
JavaScript
スポンサーリンク
スポンサーリンク
スポンサーリンク
404 Motivation Not Found