vue-multiselect样式在dev中工作但在prod中不工作

Question

我已将<style src="vue-multiselect/dist/vue-multiselect.min.css">添加到我的vue组件，其样式在运行npm run dev时工作，但在运行npm run prod时不工作。如何解决这个问题?

<template>
<multi-select :id="id" v-model="value" :options="options" :multiple="multiple" :max="max"></multi-select>
</template>
<script>
import multiSelect from 'vue-multiselect';
export default {
name: "my-multi-select",
components: { multiSelect },
}
</script>
<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>

Answer 1

问题是，您使用的是相对路径。你需要的是添加一个ref到你的src文件夹，告诉vue-cli，你想把它包含在你的生产构建中。

<style>
@import './assets/styles/vue-multiselect.min.css';
</style>

@指的是src路径。你把它存储在哪里，或者你把你的文件夹命名为什么，这取决于你。

---

编辑:另一种方法是使用以下命令重新安装包:

npm install vue-multiselect@next --save

或者像导入组件一样导入它:

import Multiselect from 'vue-multiselect'
import 'vue-multiselect/dist/vue-multiselect.min.css'

---

编辑2:vue.config.js，在root中创建这个文件。内容应为:

module.exports = {
publicPath: './'
};