1、全局配置这样写,在 nuxt.config.js 中配置你想引用的资源文件:
module.exports = {
head: {
script: [
{ src: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js' }
],
link: [
{ rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Roboto' }
]
}
}
2、局部配置这样写,可在 pages 目录内的 .vue 文件中引用外部资源:
<script>
export default {
head: {
script: [
{ src: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js' }
],
link: [
{ rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Roboto' }
]
}
}
</script>
基于vue-loader, 我们可以通过 lang 属性在组件中的template, script 或 style上使用各种预处理器。比如,我们在 pages/index.vue 组件中使用 Pug, CoffeeScript 和 Sass:
<template lang="pug">
h1.red Hello {{ name }}!
</template>
<script lang="coffee">
export default data: ->
{ name: 'World' }
</script>
<style lang="sass">
.red
color: red
</style>
<style lang="scss">
.red {
color: red
}
</style>
注:记得安装这些预处理器对应的 npm 依赖包和 Webpack 加载器
npm install --save-dev pug@2.0.3 pug-plain-loader coffeescript coffee-loader node-sass sass-loader
Nuxt.js 使用 Vue.js 官方的 babel-preset-vue-app 做 babel 的默认配置。
你可以在组件的 render 方法中直接使用 JSX 而不需要做额外的配置:
<script>
export default {
data () {
return { name: 'World' }
},
render (h) {
return <h1 class="red">{this.name}</h1>
}
}
</script>
注:这里的 h 为 createElement 的简化别名,你会在Vue生态系统中看到它,但它实际上是JSX的可选项,因为它会在ES2015+语法中 声明的任何方法和getter(不是函数或箭头函数) 中自动注入const h = this.$createElement ,所以你可以删除(h)参数。
PostCSS是使用JS插件转换样式的工具。这些插件可以使你的CSS更加整洁,支持变量和混合,可以转换将来的CSS语法,内联图像等等。
可在 nuxt.config.js 文件增加以下配置来添加 postcss 插件:
export default {
build: {
postcss: {
// 添加插件名称作为键,参数作为值
// 使用npm或yarn安装它们
plugins: {
// 通过传递 false 来禁用插件
'postcss-url': false,
'postcss-nested': {},
'postcss-responsive-type': {},
'postcss-hexrgba': {}
},
preset: {
// 更改postcss-preset-env 设置
autoprefixer: {
grid: true
}
}
}
}
}
你可以通过 nuxt.config.js 文件中的 extend 配置项来扩展 Webpack 的配置:
module.exports = {
build: {
extend (config, { isDev, isClient }) {
// ...
}
}
}
可以在 nuxt.config.js 中添加 Webpack 插件:
const webpack = require('webpack')
module.exports = {
build: {
plugins: [
new webpack.ProvidePlugin({
'$': 'jquery',
'_': 'lodash'
// ...etc.
})
]
}
}
你可以通过不同方式配置主机和端口,如下列出从最高优先级到最低优先级。
注: 如果为port指定字符串值’0’(不是 0),将为你的Nuxt应用程序分配一个随机端口。
1、作为命令参数直接传递
nuxt --hostname myhost --port 3333
或者
"scripts": {
"dev": "nuxt --hostname myhost --port 3333"
}
2、在 nuxt.config.js 中配置:
export default {
server: {
port: 8000, // default: 3000
host: '0.0.0.0' // default: localhost
}
// other configs
}
3、使用 NUXT_HOST 和 NUXT_PORT env 变量
"scripts": {
"dev": "NUXT_HOST=0.0.0.0 NUXT_PORT=3333 nuxt"
}
注: 为了更好的跨平台开发支持,你可以使用 cross-env 依赖包。(cross-env可以使用单个命令,而不必担心为平台正确设置或使用环境变量。)
安装依赖:
npm install --save-dev cross-env
配置cross-env:
"scripts": {
"dev": "cross-env NUXT_HOST=0.0.0.0 NUXT_PORT=3333 nuxt"
}
4、使用HOST和PORT env变量
"scripts": {
"dev": "HOST=0.0.0.0 PORT=3333 nuxt"
}
5、在 package.json 中配置 nuxt :
"config": {
"nuxt": {
"host": "0.0.0.0",
"port": "3333"
}
},
"scripts": {
"dev": "nuxt"
}
虽然Vue的SSR非常快,但由于创建组件实例和Virtual DOM节点的成本,它无法与纯粹基于字符串的模板的性能相匹配。在SSR性能至关重要的情况下,合理地利用缓存策略可以大大缩短响应时间并减少服务器负载。
请使用Nuxt.js的Component Cache module模块。此模块使用vue-server-renderer为Vue组件添加LRU缓存支持。
{
modules: [
// 简单的用法
'@nuxtjs/component-cache',
// 配置选项
['@nuxtjs/component-cache', {
max: 10000,
maxAge: 1000 * 60 * 60
}]
]
}
用于 Nuxt.js 的 http-proxy 中间件解决方案:
npm i @nuxtjs/proxy -D
在 nuxt.config.js 配置文件中添加对应的模块,并设置代理:
modules: [
'@nuxtjs/axios',
'@nuxtjs/proxy'
],
axios: {
proxy: true
},
proxy: {
'/api': {
target: 'http://example.com',
pathRewrite: {
'^/api' : '/'
}
}
}