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中引入

<!-- html中引入 -->
<div class="ban_img" data-wow-delay="0s">
  <!-- static中 -->
  <img src="~static/images/home/mobile.png" alt="ban" class="img"/>
  <img src="/images/home/mobile.png" alt="ban" class="img"/>
  <!-- assets中，~和@都可以 
  <img src="~/assets/images/home/mobile.png" alt="ban" class="img"/>
   -->
</div>

<!-- css中引入，文件正常引入即可，要注意图片路径的引用 -->
<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>

<!-- js中引入，js中的引入一般为网络地址，引入本地地址时也是直接使用打包后的路径（即省略~static）
或使用require引入 --> 
<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，否则无法生效

<template>
  <div>
    <Header ref="head"></Header>
    <nuxt/>
    <Footer></Footer>
  </div>
</template>
<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 to=""></nuxt-link>的方式，

高亮要用.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即可查看打包后的网站

# vue.js # 前端
Logo
华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐

cover

解锁HDC 2024之旅：从购票到报名，全程攻略

avatar 华为云开发者联盟
cover

从原始边列表到邻接矩阵Python实现图数据处理的完整指南

avatar 华为云开发者联盟
cover

华为云云原生FinOps解决方案，释放云原生最大价值

avatar 华为云开发者联盟