关于Nuxt.js部署和配置,那些你闭着眼睛都要会写的步骤
如何使用外部资源?
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
如何使用 JSX?
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插件?
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 } } } } }
如何扩展 Webpack 的配置?
你可以通过 nuxt.config.js 文件中的 extend 配置项来扩展 Webpack 的配置:
module.exports = { build: { extend (config, { isDev, isClient }) { // ... } } }
如何添加 Webpack 插件?
可以在 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组件中的 cache?
虽然Vue的SSR非常快,但由于创建组件实例和Virtual DOM节点的成本,它无法与纯粹基于字符串的模板的性能相匹配。在SSR性能至关重要的情况下,合理地利用缓存策略可以大大缩短响应时间并减少服务器负载。
请使用Nuxt.js的Component Cache module模块。此模块使用vue-server-renderer为Vue组件添加LRU缓存支持。
- 使用 yarn 或 npm 将 @nuxtjs/component-cache 依赖项添加到项目中
- 将 @nuxtjs/component-cache 添加到 nuxt.config.js 的modules部分
{ 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' : '/' } } }
- 基于nuxt.js的项目从搭建到部署步骤
- 关于eclipse配置tomcat部署路径问题的额外建议
- Grunt 自动化部署之css、image、javascript、html压缩Gruntfile.js配置
- 阿里云ecs服务器中安装部署node.js的步骤
- 关于开发板配置网络工具Telnet和SSH的步骤(需开发板已支持),以及开发板与PC文件互传
- nginx+mmfpeg+video.js实现直播效果(含centos7环境配置步骤)
- 关于Eclipse中工程关联依赖的部署配置问题
- 42、关于在tomcat下部署workbench+kie-server 环境的步骤
- 关于编译Android7.0环境配置步骤!!!!!!!!!!!!!!!!!!!!!!
- 关于配置的那些事
- Windows环境下的NodeJS+NPM+Bower安装配置步骤
- nuxt.js express模板项目服务器部署
- nuxt.js 2.0 开发环境配置
- 在Mac上关于tomcat服务器的安装、配置、启动、部署web详细流程
- 关于JS那些容易被你忽略的那些点(1)
- 在Docker快速部署Node.js应用的详细步骤
- 关于部署、配置基于WebLogic10应用时的一个错误
- nodejs教程 安装express及配置app.js文件的详细步骤
- 关于nginx 配置gzip 压缩js问题 请求合并问题
- 华为关于gvrp 的配置,一般步骤以及应用。