Javascript 未找到CSS和JS的Vue dist路径
生成后,我在渲染VueJS应用程序时遇到问题。当我查看build文件夹并检查路径时,在指向资产、css和javascript的路径的开头有一个正斜杠。这使得我的css、资产和javascript无法找到。在运行构建脚本之前,我想知道如何避免这个问题。非常感谢。这是我的密码: App.vueJavascript 未找到CSS和JS的Vue dist路径,javascript,css,vue.js,webpack,vue-cli,Javascript,Css,Vue.js,Webpack,Vue Cli,生成后,我在渲染VueJS应用程序时遇到问题。当我查看build文件夹并检查路径时,在指向资产、css和javascript的路径的开头有一个正斜杠。这使得我的css、资产和javascript无法找到。在运行构建脚本之前,我想知道如何避免这个问题。非常感谢。这是我的密码: App.vue <template> <div id="app"> <BaseTimer /> <!-- <PomodoroTimer /> --&g
<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>
默认情况下,路径指向服务器根目录。这意味着/if在Apache/node这样的web服务器上静态地提供文件,或者甚至直接在c:\if中提供文件,例如双击Windows 假设您使用的是Vue CLI,则可以通过使用publicPath在项目根目录中编辑或创建-Vue.config.js来配置此位置: module.exports={ publicPath:process.env.NODE_env==='production' “/your/path/to/dist/” : '/' }
这使Vue可以按预期在/处为开发服务器提供服务,并在生产中使用其他路径。如果您想知道,CLI会自动设置process.env.NODE_env。修改此文件后不要忘记重建。默认情况下,路径指向服务器根目录。这意味着/if在Apache/node这样的web服务器上静态地提供文件,或者甚至直接在c:\if中提供文件,例如双击Windows 假设您使用的是Vue CLI,则可以通过使用publicPath在项目根目录中编辑或创建-Vue.config.js来配置此位置: module.exports={ publicPath:process.env.NODE_env==='production' “/your/path/to/dist/” : '/' }
这使Vue可以按预期在/处为开发服务器提供服务,并在生产中使用其他路径。如果您想知道,CLI会自动设置process.env.NODE_env。请不要忘记在修改此文件后重建。您在哪里为应用程序提供服务?目前在本地。现在我正在进行一些测试。我相信这条路是由包裹决定的。我将更改它,如果它有效,我将在这里发布答案。你在哪里提供该应用程序?目前在本地。现在我正在进行一些测试。我相信这条路是由包裹决定的。我将改变它,如果它有效,我将在这里发布答案。谢谢你,丹。我明天会试试,让你知道它是如何运行的。我发现另一个有效的解决方案是通过添加以下内容来更改我在parcel中的构建路径:build-prod:parcel-build-no-minify src/index.html-public url./这在package.json中。这样做对我也有好处。谢谢,丹,酷,np。我对Parcel不太熟悉,但很高兴您能理解:没有Vue CLI,您如何做到这一点?Vue CLI是由Vue直接维护还是由第三方维护?Vue CLI是否也是标准/最佳实践?@Soubriquet-1如果您不使用Vue CLI,只需对资产路径进行硬编码即可。2是,由Vue维护。是的,谢谢你,丹。我明天会试试,让你知道它是如何运行的。我发现另一个有效的解决方案是通过添加以下内容来更改我在parcel中的构建路径:build-prod:parcel-build-no-minify src/index.html-public url./这在package.json中。这样做对我也有好处。谢谢,丹,酷,np。我对Parcel不太熟悉,但很高兴您能理解:没有Vue CLI,您如何做到这一点?Vue CLI是由Vue直接维护还是由第三方维护?Vue CLI是否也是标准/最佳实践?@Soubriquet-1如果您不使用Vue CLI,只需对资产路径进行硬编码即可。2是,由Vue维护。3是的。
<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>
<!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>
import Vue from "vue";
import App from "./App.vue";
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");