javascript - 找不到 CSS 和 JS 的 Vue dist 路径

Question

我在构建后无法呈现我的 VueJS 应用程序。当我查看构建文件夹并检查路径时，我的 Assets 、css 和 javascript 路径的开头有一个正斜杠。这使得我的 css、 Assets 和 javascript 无法找到。我想知道如何在运行构建脚本之前避免此问题。谢谢。这是我的代码:

App.vue

<template>
  <div id="app">
    <BaseTimer />
    <!-- <PomodoroTimer /> -->
  </div>
</template>

<script>
import BaseTimer from "./components/BaseTimer";
// import PomodoroTimer from "./components/PomodoroTimer";

export default {
  name: "App",

  components: {
    BaseTimer
    // PomodoroTimer
  }
};
</script>

<style>
body {
  background-color: #fff;
}

#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
}
</style>

BaseTimer.vue(在 components 文件夹内 - 在 src 文件夹内)

<template>
  <div class="base-timer">
    <svg class="base-timer__svg" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
      <g class="base-timer__circle">
        <circle class="base-timer__path-elapsed" cx="50" cy="50" r="45" />
        <path
          :stroke-dasharray="circleDasharray"
          class="base-timer__path-remaining"
          :class="remainingPathColor"
          d="
            M 50, 50
            m -45, 0
            a 45,45 0 1,0 90,0
            a 45,45 0 1,0 -90,0
          "
        />
      </g>
    </svg>
    <span class="base-timer__label">{{ formattedTimeLeft }}</span>
    <br />
    <select name="timer-setter" id="timer-setter" @change="selectedTime($event)">
      <option value selected disabled>---Select a Time---</option>
      <option v-for="second in seconds" :value="second.value" v-bind:key="second.id">{{second.text}}</option>
    </select>
    <button id="start" class="button is-dark is-large" @click="startTimer">GO</button>
    <div class="pause-or-kill">
      <!--     Pause Timer -->
      <button id="stop" class="button is-dark is-large" @click="pauseTimer">Pause</button>
      <!--     Restart Timer -->
      <button id="reset" class="button is-dark is-large" @click="restartTimer">Restart</button>
      <button id="kill" class="button" @click="kill">Reset</button>
    </div>
  </div>
</template>

<script>
let audio = new Audio(require("/assets/audio/ding.mp3"));

const FULL_DASH_ARRAY = 283;
const WARNING_THRESHOLD = 10;
const ALERT_THRESHOLD = 5;

const COLOR_CODES = {
  info: {
    color: "green"
  },
  warning: {
    color: "orange",
    threshold: WARNING_THRESHOLD
  },
  alert: {
    color: "red",
    threshold: ALERT_THRESHOLD
  }
};

let TIME_LIMIT = null;

export default {
  data() {
    return {
      timePassed: 0,
      timerInterval: null,
      seconds: [
        { id: 0, value: null, text: "--- Select a Time ---" },
        { id: 1, value: 20, text: "20 Seconds" },
        { id: 2, value: 30, text: "30 Seconds" },
        { id: 3, value: 60, text: "1 Minute" },
        { id: 4, value: 120, text: "2 Minutes" },
        { id: 5, value: 300, text: "5 Minutes" },
        { id: 6, value: 600, text: "10 Minutes" },
        { id: 7, value: 900, text: "15 Minutes" },
        { id: 8, value: 1800, text: "30 Minutes" },
        { id: 9, value: 3600, text: "1 Hour" }
      ]
    };
  },

  computed: {
    circleDasharray() {
      return `${(this.timeFraction * FULL_DASH_ARRAY).toFixed(0)} 283`;
    },

    formattedTimeLeft() {
      const timeLeft = this.timeLeft;
      const minutes = Math.floor(timeLeft / 60);
      let seconds = timeLeft % 60;

      if (seconds < 10) {
        seconds = `0${seconds}`;
      }

      return `${minutes}:${seconds}`;
    },

    timeLeft() {
      return TIME_LIMIT - this.timePassed;
    },

    timeFraction() {
      const rawTimeFraction = this.timeLeft / TIME_LIMIT;
      return rawTimeFraction - (1 / TIME_LIMIT) * (1 - rawTimeFraction);
    },

    remainingPathColor() {
      const { alert, warning, info } = COLOR_CODES;

      if (this.timeLeft <= alert.threshold) {
        return alert.color;
      } else if (this.timeLeft <= warning.threshold) {
        return warning.color;
      } else {
        return info.color;
      }
    }
  },

  watch: {
    timeLeft(newValue) {
      if (newValue === 0) {
        this.onTimesUp();
      }
    }
  },

  // startTimer() {
  //   this.startTimer();
  // },

  methods: {
    onTimesUp() {
      clearInterval(this.timerInterval);
      audio.play();
      setTimeout(function() {
        location.reload();
      }, 2000);
    },
    startTimer() {
      this.timerInterval = setInterval(() => (this.timePassed += 1), 1000);
    },
    restartTimer() {
      clearInterval(this.timerInterval);
      this.timerInterval = setInterval(() => (this.timePassed += 1), 1000);
    },
    pauseTimer() {
      clearInterval(this.timerInterval);
    },
    kill() {
      clearInterval(this.timerInterval);
      location.reload();
    },
    selectedTime(event) {
      console.log(event.target.value);
      TIME_LIMIT = event.target.value;
    }
  }
};
</script>

<style scoped lang="scss">
.base-timer {
  position: relative;
  width: 300px;
  height: 300px;

  &__svg {
    transform: scaleX(-1);
  }

  &__circle {
    fill: none;
    stroke: none;
  }

  &__path-elapsed {
    stroke-width: 7px;
    stroke: grey;
  }

  &__path-remaining {
    stroke-width: 7px;
    stroke-linecap: round;
    transform: rotate(90deg);
    transform-origin: center;
    transition: 1s linear all;
    fill-rule: nonzero;
    stroke: currentColor;

    &.green {
      color: rgb(65, 184, 131);
    }

    &.orange {
      color: orange;
    }

    &.red {
      color: red;
    }
  }

  &__label {
    position: absolute;
    width: 300px;
    height: 300px;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
  }
}

select {
  margin-top: 30px;
  margin-right: 15px;
  padding: 15px;
  border-radius: 8px;
  background-color: rgb(65, 184, 131);
  color: #fff;
  font-size: 18px;
  -webkit-box-shadow: 10px 10px 20px -8px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 10px 10px 20px -8px rgba(0, 0, 0, 0.75);
  box-shadow: 10px 10px 20px -8px rgba(0, 0, 0, 0.75);
}

button {
  padding: 15px;
  font-size: 18px;
  background-color: rgb(65, 184, 131);
  border-radius: 8px;
  color: #fff;
  -webkit-box-shadow: 10px 10px 20px -8px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 10px 10px 20px -8px rgba(0, 0, 0, 0.75);
  box-shadow: 10px 10px 20px -8px rgba(0, 0, 0, 0.75);
  outline: none;
}
.pause-or-kill {
  margin-top: 20px;
}
</style>

src 文件夹中的 index.html

<!DOCTYPE html>
<html>

<head>
    <title>Vue Parcel</title>
    <meta charset="utf-8">
</head>

<body>
    <div id="app"></div>
    <script src="index.js"></script>
</body>

</html>

src 文件夹中的 index.js

import Vue from "vue";
import App from "./App.vue";

Vue.config.productionTip = false;


new Vue({
  render: h => h(App)
}).$mount("#app"); 

Answer 1

默认情况下，路径指向服务器根目录。这意味着 / 如果在 Apache/node 等网络服务器上静态提供文件，或者如果双击 Windows 甚至直接在 c:\ 中提供文件，例如。

假设您使用的是 Vue CLI，您可以使用 publicPath 在元素根目录中编辑或创建 vue.config.js 来配置此位置:

module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? '/your/path/to/dist/'
    : '/'
}

这让 Vue 按预期在 / 服务开发服务器，并在生产中使用其他路径。如果您想知道，CLI 会自动设置 process.env.NODE_ENV。修改此文件后不要忘记重建。