生产顺风 css 未在生产中正确显示
Production tailwind css not displaying correctly on production
所以,我注意到我的一些顺风 css 没有在生产中正确生成,但在我的本地任何想法中都表现良好?我正在使用,vue + tailwind + laravel + inertia stack。此外,我没有在生产环境中部署任何东西的经验,因此我正在使用数字海洋的新“应用程序”。
生产
- Ubuntu 18.04.5 LTS
- 节点版本:12.22.5
本地
- Ubuntu 20.04.2 LTS
- 节点版本:v16.7.0
它应该是什么样子(本地)
结果如何(制作)
这是我的tailwind.config.js
module.exports = {
purge: [
'./resources/**/*.blade.php',
'./resources/**/*.js',
// './resources/**/*.vue',
],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {
colors: {
gray: {
750: '#2d3748',
850: '#1a202c'
},
},
spacing: {
112: '28rem',
120: '30rem',
128: '32rem',
136: '34rem',
},
},
},
variants: {
extend: {},
},
plugins: [],
}
命令 I 运行 构建生产
Build Command
composer install --optimize-autoloader
composer dump-autoload --optimize
php artisan config:cache
php artisan route:cache
php artisan view:cache
php artisan optimize
php artisan migrate
npm install --no-optional
npm run production
php artisan ziggy:generate
Index.vue
<template>
<div class="min-h-screen bg-white pt-12">
<Navbar class="mb-2"/>
<div class="flex flex-row lg:mx-40 md:mx-10">
<div class="md:w-64 w-2/12">
<div class="bg-gray-300 h-screen flex flex-col p-4 space-y-10">
<div>
<span>
<b>Categories</b>
</span>
<div class="flex flex-col space-y-2 cursor-pointer" v-for="category in categories">
<span @click="filterCategory(category)">{{ category.name }}</span>
</div>
</div>
<div>
<span>
<b>Price Range</b>
</span>
<div class="flex flex-col font-semibold">
Minimum Price<input type="text" name="min" placeholder="Min" v-model="filters.minPrice" class="rounded-xl px-2">
Maximum Price<input type="text" name="min" placeholder="Max" v-model="filters.maxPrice" class="rounded-xl px-2">
</div>
<button class="p-0.5 px-2 mt-2 bg-gray-600 text-gray-300 rounded-xl" @click="filter">Filter</button>
<button class="p-0.5 ml-2 px-2 mt-2 text-gray-600 rounded-xl" @click="clearPrice">Clear</button>
</div>
</div>
</div>
<div class="w-10/12 flex flex-col">
<div class="flex flex-row items-center pl-2">
Search <input v-model="filters.search" @keyup="filter" type="text" name="min" placeholder="Search Products" class="border border-gray-400 rounded-xl p-1 m-2 w-full">
</div>
<FilterTags :filters="filters" @remove="removeCategory"/>
<div class="flex flex-wrap h-1/3 cursor-pointer">
<div v-for="product in products.data" class="w-1/5">
<ProductCard class="m-4" :name="product.name" :price="product.price" :currency="'RM'" @click="viewDetails(product.id)"/>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import Navbar from '@/Components/Shop/Navbar';
import ProductCard from '@/Components/Shop/ProductCard';
import FilterTags from '@/Components/Shop/FilterTags';
import { debounce } from 'lodash';
export default {
components: {
Navbar,
ProductCard,
FilterTags,
},
props: {
products: {
type: Object,
default: {}
},
categories: {
type: Object,
default: {}
},
filters: {
type: Object,
default: {}
}
},
data() {
return {
}
},
mounted () {
},
methods: {
filter: debounce( function() {
this.$inertia.get(route('playground.shop.index'), this.filters, { preserveState: true });
}, 300),
filterCategory: debounce( function(category) {
this.filters.categories.push(category.name);
this.filter();
}, 200),
removeCategory(removedCategory) {
this.filters.categories = this.filters.categories.filter(function(category) {
return category != removedCategory;
});
this.filter();
},
clearPrice() {
this.filters.minPrice = null;
this.filters.maxPrice = null;
this.filter();
},
viewDetails(product) {
this.$inertia.visit(route('playground.shop.product.show', product));
}
},
}
</script>
我猜你忘了取消注释阻止 PostCSS 清除你在 Vue 文件上使用的 Tailwind 类 的行。
// Change this:
module.exports = {
purge: [
'./resources/**/*.blade.php',
'./resources/**/*.js',
// './resources/**/*.vue',
]
}
// to this:
module.exports = {
purge: [
'./resources/**/*.blade.php',
'./resources/**/*.js',
'./resources/**/*.vue'
]
}
所以,我注意到我的一些顺风 css 没有在生产中正确生成,但在我的本地任何想法中都表现良好?我正在使用,vue + tailwind + laravel + inertia stack。此外,我没有在生产环境中部署任何东西的经验,因此我正在使用数字海洋的新“应用程序”。
生产
- Ubuntu 18.04.5 LTS
- 节点版本:12.22.5
本地
- Ubuntu 20.04.2 LTS
- 节点版本:v16.7.0
它应该是什么样子(本地)
结果如何(制作)
这是我的tailwind.config.js
module.exports = {
purge: [
'./resources/**/*.blade.php',
'./resources/**/*.js',
// './resources/**/*.vue',
],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {
colors: {
gray: {
750: '#2d3748',
850: '#1a202c'
},
},
spacing: {
112: '28rem',
120: '30rem',
128: '32rem',
136: '34rem',
},
},
},
variants: {
extend: {},
},
plugins: [],
}
命令 I 运行 构建生产
Build Command
composer install --optimize-autoloader
composer dump-autoload --optimize
php artisan config:cache
php artisan route:cache
php artisan view:cache
php artisan optimize
php artisan migrate
npm install --no-optional
npm run production
php artisan ziggy:generate
Index.vue
<template>
<div class="min-h-screen bg-white pt-12">
<Navbar class="mb-2"/>
<div class="flex flex-row lg:mx-40 md:mx-10">
<div class="md:w-64 w-2/12">
<div class="bg-gray-300 h-screen flex flex-col p-4 space-y-10">
<div>
<span>
<b>Categories</b>
</span>
<div class="flex flex-col space-y-2 cursor-pointer" v-for="category in categories">
<span @click="filterCategory(category)">{{ category.name }}</span>
</div>
</div>
<div>
<span>
<b>Price Range</b>
</span>
<div class="flex flex-col font-semibold">
Minimum Price<input type="text" name="min" placeholder="Min" v-model="filters.minPrice" class="rounded-xl px-2">
Maximum Price<input type="text" name="min" placeholder="Max" v-model="filters.maxPrice" class="rounded-xl px-2">
</div>
<button class="p-0.5 px-2 mt-2 bg-gray-600 text-gray-300 rounded-xl" @click="filter">Filter</button>
<button class="p-0.5 ml-2 px-2 mt-2 text-gray-600 rounded-xl" @click="clearPrice">Clear</button>
</div>
</div>
</div>
<div class="w-10/12 flex flex-col">
<div class="flex flex-row items-center pl-2">
Search <input v-model="filters.search" @keyup="filter" type="text" name="min" placeholder="Search Products" class="border border-gray-400 rounded-xl p-1 m-2 w-full">
</div>
<FilterTags :filters="filters" @remove="removeCategory"/>
<div class="flex flex-wrap h-1/3 cursor-pointer">
<div v-for="product in products.data" class="w-1/5">
<ProductCard class="m-4" :name="product.name" :price="product.price" :currency="'RM'" @click="viewDetails(product.id)"/>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import Navbar from '@/Components/Shop/Navbar';
import ProductCard from '@/Components/Shop/ProductCard';
import FilterTags from '@/Components/Shop/FilterTags';
import { debounce } from 'lodash';
export default {
components: {
Navbar,
ProductCard,
FilterTags,
},
props: {
products: {
type: Object,
default: {}
},
categories: {
type: Object,
default: {}
},
filters: {
type: Object,
default: {}
}
},
data() {
return {
}
},
mounted () {
},
methods: {
filter: debounce( function() {
this.$inertia.get(route('playground.shop.index'), this.filters, { preserveState: true });
}, 300),
filterCategory: debounce( function(category) {
this.filters.categories.push(category.name);
this.filter();
}, 200),
removeCategory(removedCategory) {
this.filters.categories = this.filters.categories.filter(function(category) {
return category != removedCategory;
});
this.filter();
},
clearPrice() {
this.filters.minPrice = null;
this.filters.maxPrice = null;
this.filter();
},
viewDetails(product) {
this.$inertia.visit(route('playground.shop.product.show', product));
}
},
}
</script>
我猜你忘了取消注释阻止 PostCSS 清除你在 Vue 文件上使用的 Tailwind 类 的行。
// Change this:
module.exports = {
purge: [
'./resources/**/*.blade.php',
'./resources/**/*.js',
// './resources/**/*.vue',
]
}
// to this:
module.exports = {
purge: [
'./resources/**/*.blade.php',
'./resources/**/*.js',
'./resources/**/*.vue'
]
}