内容简介:公司项目需要用到nuxt.js的服务端渲染,所以使用了nuxt.js官方的脚手架搭建了项目,在这儿记录一些搭建过程中踩过的坑。先写这么多,以后随着项目进度继续更新。
公司项目需要用到nuxt.js的服务端渲染,所以使用了nuxt.js官方的脚手架搭建了项目,在这儿记录一些搭建过程中踩过的坑。
-
IE9的适配问题
IE9是一个老大难的问题,因为它不支持ES6的语法,而且ie9也不知路由中的history模式,所以我在这儿暂时的解决办法如下。文档>>
// nuxt.config.js /* ** Global router middleware */ router: { mode: 'history', middleware: 'global', fallback: true }, 复制代码
先在设置一下fallback,具体不知道为什么看文档,最重要的是设置babel-polyfill。
yarn add babel-polyfill --dev 复制代码
// plugin 下 新建babel-polyfill文档下的index.js import 'babel-polyfill' 复制代码
// nuxt.config.js plugins: [ { src: '@/plugins/babel-polyfill', ssr: true } // 将es6转换为es5 兼容ie9 ], 复制代码
// 在文档根目录下新建 .babelrc 文件 { "presets": [ [ "env", { "modules": false, "useBuiltIns": "entry" } ], "stage-3" ] } 复制代码
至此,项目就能在ie9上运行起来了,可能开发中还会有问题,到时候会进行补充。
-
全局样式变量的引入和全局样式的引入
因为开发时项目使用的css预编译器是scss,所以注册全局的样式变量如下。
先安装scss预编译器
npm i node-sass sass-loader scss-loader --save-dev 复制代码
// nuxt.config.js 中配置 styleResources css: [ { src: '~/assets/styles/index.scss', lang: 'scss' } ], modules: [ // Doc: https://axios.nuxtjs.org/usage '@nuxtjs/axios', '@nuxtjs/pwa', '@nuxtjs/eslint-module', '@nuxtjs/style-resources' ], build: { transpile: [/^element-ui/], styleResources: { scss: './assets/styles/variable/index.scss' }, /* ** You can extend webpack config here */ extend(config, ctx) {} } 复制代码
-
Vue 全局注入函数和属性值
有时您希望在整个应用程序中使用某个函数或属性值,此时,你需要将它们注入到Vue实例(客户端),context(服务器端)甚至 store(Vuex)。按照惯例,新增的属性或方法名使用
$
作为前缀。其实这个官方文档有,但是我还是再写一遍加深一遍记忆。
比如说我想全局使用我定义的接口路径。
// urls -> index.js (PS:一定要写在plugins文件目录下) import Vue from 'vue' import dev from './dev' import prod from './prod' // 判断是生产环境还是开发环境 const env = process.env.NODE_ENV const serverIp = env === 'production' ? prod.prodIp : dev.devIp const interfacePORT = env === 'production' ? `${prod.prodInterfacePort}${ prod.prodName === '' ? '' : '/' + prod.prodName }` : `${dev.devInterfacePort}${dev.devName === '' ? '' : '/' + dev.devName}` const serverUrl = 'http://' + serverIp + '/' const interfaceUrl = 'http://' + serverIp + ':' + interfacePORT + '/' // 同时注入context 和 Vue中,在Vue中会自动加上在前面加上$ export default ({ app }, inject) => { inject('serverUrl', serverUrl) inject('interfaceUrl', interfaceUrl) } 复制代码
// nuxt.config.js plugins: [ { src: '@/config/url', ssr: false }, // 接口地址的全局引入 ], 复制代码
然后就可以在项目中全局引入
export default { mounted(){ console.log(this.$interfaceUrl) } asyncData(context){ console.log(context.app.$interfaceUrl) } } 复制代码
先写这么多,以后随着项目进度继续更新。
以上所述就是小编给大家介绍的《Nuxt.js项目搭建配置踩坑》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- LAMP环境搭建与配置
- Flutter开发环境搭建配置
- Docker 搭建与配置检查
- webpack入门(2) - 安装,配置,环境搭建
- 快速安装与配置kubernetes集群搭建
- NFS网络文件存储系统搭建配置详解
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。