1、sass下载后报错
Nuxt安装时自带的webpack版本为4,下载新版的sass会报错,要降版本安装
package.json配置,具体版本可根据自己情况修改
- "devDependencies": {
- "node-sass": "^6.0.1",
- "sass-loader": "^10.2.0"
- }
2、sass设置变量后编译失败
使用了$color:rgba(255, 196, 0, 1);的变量,以及变量无法响应设置的问题
不再使用sass写法,改为css3的:root{--color: rgba(255, 196, 0, 1);}
穿透子组件样式的/deep/ 要换成 :deep()
- :root{
- --width: 94%;
- --maxWidth: 1440px;
- --color: rgba(255, 196, 0, 1);
- --color1: rgba(40, 212, 200, 1);
- --font16: 16px;
- --font18: 18px;
- --font20: 20px;
- --font22: 22px;
- --font24: 24px;
- --font26: 26px;
- --font28: 28px;
- --font32: 32px;
- --font48: 48px;
- --font56: 56px;
- }
- @media screen and (max-width:768px) {
- :root{
- --font16: 15px;
- --font18: 16px;
- --font20: 16px;
- --font22: 18px;
- --font24: 18px;
- --font26: 20px;
- --font28: 20px;
- --font32: 24px;
- --font48: 26px;
- --font56: 36px;
- }
- }
3、文件路径及文件放置问题
需要编译的文件放在assets的文件夹中(我这边只放了sass的文件)
不需要编译的文件放在了static的文件夹中(分了css,images,js,font文件夹)
路径引用
nuxt.config.json中
- head: {
- title: 'nuxt网站',
- ... // 省略内容
-
- // 注意:在head中引入static的资源省略要@/static/直接使用打包后的路径
- link: [
- { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
- ],
- script: [
- {src:'/js/wow.js'},
- {src:'/js/swiper.js'}
- ],
- },
- // 引入样式,可按正常的方式引入,css和scssd都可直接引入
- css: [
- '@/static/css/reset.css',
- '@/static/css/animate.css',
- 'element-ui/lib/theme-chalk/index.css',
- '@/static/css/swiper.css',
- '@/assets/scss/base.scss',
- ],
-
- // 引入js, js引入方法要放到plugins文件中
- plugins: [
- '@/plugins/element-ui',
- '@/plugins/format'
- ],
html,css,js中引入
- <div class="ban_img" data-wow-delay="0s">
-
- <img src="~static/images/home/mobile.png" alt="ban" class="img"/>
- <img src="/images/home/mobile.png" alt="ban" class="img"/>
-
- div>
-
- <style lang="scss" scoped>
- @import "@/assets/scss/home.scss";
- .banner_box {
- position: relative;
- /*static中*/
- background: url('~static/images/home/banner_bg.png');
- background: url('/images/home/banner_bg.png');
- /*assets中,注意在css中的引用都不带"/"
- background: url('~assets/images/home/banner_bg.png');
- */
- background-size: 100% 100%;
- }
- style>
-
-
- <script>
- export default {
- data () {
- return {
- showList:[
- // static中的引入
- {id:'1',image:'/images/home/show1.jpg'},
- // assets中的引入
- {id:'2',image:require('~/assets/images/home/show2.jpg')},
- {id:'3',image:'/images/home/show3.jpg'},
- {id:'4',image:'/images/home/show4.jpg'},
- {id:'5',image:'/images/home/show5.jpg'},
- ]
- }
- },
- }
- script>
4、使用插件或自己编写方法
正常的例如wow,swiper等都可下载后放入static中,直接在nuxt.config.json的head中引入即可
要封装方法,可在plugins文件夹中建js文件后,再在nuxt.config.json的plugins中引入即可,上面就引入可自定义的图片路径处理方法文件format.js,有其他方法或过滤器都可按照上述方法编写后,引入使用(可参考安装时element的编写方式)
format.js
- import Vue from 'vue'
- let format = {
- install(Vue) {
- Vue.prototype.$formatImg = function(value){
- const imgPath = process.env.IMG_ROOT
- return imgPath + value
- };
- }
- }
- Vue.use(format);
5、axios的使用和环境变量的配置
直接使用@nuxtjs/axios在nuxt.config.js中配置代理进行跨域,需要安装@nuxtjs/proxy模块,但不需要手动注册
这里使用了的引入方式axios的方式,配置环境变量也非常方便,上面的图片路径处理就使用了环境变量
安装axios,和cross-env(环境配置插件),下面有配置后的package.json文件,可查看更改后的命令和插件版本
环境配置文件env.js,在最外层即和nuxt.config.js同级
env.js(地址路径根据自己的设置)
- export default {
- dev: {
- MODE: 'development',
- API_ROOT: '192.168.51:8899',//测试服务器地址
- IMG_ROOT: '192.168.51:8899/file'
- },
- pro: {
- MODE: 'production',
- API_ROOT: '192.168.51:8899',//正式服务器地址
- IMG_ROOT: '192.168.51:8899/file'
- }
- }
在nuxt.config.js中引入和使用环境变量
nuxt.config.js,文件的 ... 省略的代码
- import env from './env'
- export default {
- target: 'static', // default is 'server'
-
- head: {
- ...
- },
- env: {
- API_ROOT: env[process.env.MODE].API_ROOT,
- IMG_ROOT: env[process.env.MODE].IMG_ROOT,
- },
-
- // Global CSS: https://go.nuxtjs.dev/config-css
- css: [
- ...
- ],
-
- ...
- }
配置api文件,可将所有api集中处理,新建api文件夹,在文件夹下建config.js和index.js
config.js,配置axios的基本参数
- // 引用axios
- import axios from 'axios'
- // 配置API接口地址
- const root = process.env.API_ROOT
-
- const http = axios.create({
- timeout: 1000 * 10,
- baseURL: root,
- // headers: headers,
- withCredentials: false
- })
- // request 拦截器
- // 可以自请求发送前对请求做一些处理
- // 比如统一加token,对请求参数统一加密
- http.interceptors.request.use(config => {
- config.headers['Content-Type'] = 'appDownload/json;charset=utf-8';
- // config.headers['token'] = user.token; // 设置请求头
- return config
- }, error => {
- return Promise.reject(error)
- });
-
- // response 拦截器
- // 可以在接口响应后统一处理结果
- http.interceptors.response.use(
- response => {
- let res = response.data;
- // 如果是返回的文件
- if (response.config.responseType === 'blob') {
- return res
- }
- // 兼容服务端返回的字符串数据
- if (typeof res === 'string') {
- res = res ? JSON.parse(res) : res
- }
- return res;
- },
- error => {
- console.log('err' + error) // for debug
- return Promise.reject(error)
- }
- )
-
- export default http
index.js,封装api,使用时引入即可, import {getNavigationList} from "@/api"
- import http from './config'
-
- // 获取导航
- export function getNavigationList(data) {
- return http({
- url: '/api/basic/getNavigationList',
- method: 'GET',
- params: data
- })
- }
-
- ...
-
-
package.json,使用不同的命令即可使用不同的环境打包
- {
- "name": "website-nuxt",
- "version": "1.0.0",
- "private": true,
- "scripts": {
- "dev": "cross-env MODE=dev nuxt",
- "pro": "cross-env MODE=pro nuxt",
- "builddev": "cross-env MODE=dev nuxt build",
- "build": "cross-env MODE=pro nuxt build",
- "test": "cross-env MODE=dev nuxt generate",
- "generate": "cross-env MODE=pro nuxt generate"
- },
- "dependencies": {
- "axios": "^0.27.2",
- "core-js": "^3.19.3",
- "element-ui": "^2.15.6",
- "nuxt": "^2.15.8",
- "vue": "^2.6.14",
- "vue-server-renderer": "^2.6.14",
- "vue-template-compiler": "^2.6.14",
- "webpack": "^4.46.0"
- },
- "devDependencies": {
- "cross-env": "^7.0.3",
- "node-sass": "^5.0.0",
- "sass-loader": "^10.1.1"
- }
- }
6、使用模板和数据的渲染
通用头部和尾部
laylouts中的default.vue文件,没有时要自己创建
注意:该文件中的组件引入数据要使用fetch,不能使用asyncData,否则无法生效
- <div>
- <Header ref="head">Header>
- <nuxt/>
- <Footer>Footer>
- div>
- <script>
- import Footer from '@/components/footer/footer.vue'
- import Header from '@/components/header/header.vue'
- export default {
- components:{
- Header,
- Footer
- },
- watch: {
- /* 监听路由的变化,让页面回到顶部(
- 或直接在nuxt.config.json中配置
- router: {
- prefetchLinks: false,
- scrollBehavior(to, from, savedPosition) {
- if (to.fullPath !== from.fullPath) {
- return { x: 0, y: 0 }
- }
- },
- },
- )
- */
- '$route': function(){
- document.body.scrollTop = 0
- document.documentElement.scrollTop = 0
- window.scrollTop = 0
- this.$refs.head.isActive = false // 头部使用了手机端折叠隐藏的效果
- }
- },
- }
- script>
其他页面文件的数据加载都要放到asyncData中
7、页面跳转
使用
高亮要用.nuxt-link-exact-active的类名,nuxt-link-active高亮是多个的
8、打包使用
npm run builddev 使用测试地址打包网站,package.json中配置
npm run build 使用正式地址打包网站
npm run test 使用测试地址打包静态网站,打包静态页后页面内容就固定了,不跟随后台变化
npm run generate 使用正式地址打包静态网站
打包后的文件可使用live-serve测试,直接在vscode中下载live-serve插件即可,
注意:查看时要新开窗口打开dist文件,dist为最外层模拟服务器环境,否则图片路径可能找不到以为打包错误
右键点击dist文件中的index.html文件执行live-serve即可查看打包后的网站