【Vue】はじめてのVue.js（×webpack）でbackground-imageのパスがおかしくなった話

Vue.jsをためしてみる

ふだん、まったくreactとかvueとかその手のフレームワークも、webpackも（それこそgulpすら）ほとんど使わずに生きてきました。

が、そうはいっても全く使えないのは……ということで。

Vue.jsでポートフォリオサイト制作記という同人誌で、Vue.js（×Webpack）をためしてみました。

作ったもの

（記事執筆時点-2018.6.24-では作りかけ）

http://deep-space.blue/testing/vue/build/

同人誌を見ながらやればおおよそできる

時々、説明が足りていないところがあるので、本に載っているよくよくソースを見返す。
（sassの話をする前に、src/main.jsにsassのimport記述が載ってて、ここぞというときにmain.jsに足す話が出てこなかったりするようだ）

ルーティングの設定は、vue-project/src/router/index.jsに。
ビルドの設定の基本はvue-project/config/index.jsに。

ビルドした中身はvue-project/dist/に入っているので、そこだけFTPアップ！

同人誌を読んだだけでは詰まったこと

ローカル環境で動かす分には、あまり困るところはなかった。（ミスなどでページが出なくなったりはよくするが）

しかし、同人誌で想定していないことをやろうとすると、詰む。詰んだ。

下層フォルダにupしたい

http://deep-space.blue/ではなくて、今回は/testing/vue/build/にいれた。

そのために触ったファイルは２つ

vue-project/src/router/index.js

/* 以上略 */
Vue.use(Router)

export default new Router({
    base: '/testing/vue/build/',//upするときのパスを指定
    mode: 'history',
    routes: [
/* 以下略 */

 

vue-project/config/index.js

/* 以上略 */
  build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: '',//staticフォルダは要らなかったから''に
    assetsPublicPath: '',//相対パスにしたかったから''に
/* 以下略 */

 

buildしたソースのcss内の画像パスがおかしい

相対パス対策をしたところ、background:url(“../img/bg.jpg”)としたはずが、”img/……”になってしまって階層がくるう。

webpackあるあるらしいが、直し方が分からずさまようこと1h30m。

vue-project/build/utils.js

/* 以上略 */
exports.cssLoaders = function (options) {
    options = options || {}

    const cssLoader = {
        loader: 'css-loader',
        options: {
            sourceMap: options.sourceMap,
            url: false // url()を変換しない
        }
    }
/* 以下略 */

css-loaderに、url: falseというoptionsをつけることで解決。

参考：http://www.kantenna.com/pg/2018/05/webpack_scss.php