• Nuxt 常见问题与解决方案


    1、sass下载后报错

    Nuxt安装时自带的webpack版本为4,下载新版的sass会报错,要降版本安装

    package.json配置,具体版本可根据自己情况修改

    1. "devDependencies": {
    2. "node-sass": "^6.0.1",
    3. "sass-loader": "^10.2.0"
    4. }

    2、sass设置变量后编译失败

    使用了$color:rgba(255, 196, 0, 1);的变量,以及变量无法响应设置的问题

    不再使用sass写法,改为css3的:root{--color: rgba(255, 196, 0, 1);} 

    穿透子组件样式的/deep/ 要换成 :deep()  

    1. :root{
    2. --width: 94%;
    3. --maxWidth: 1440px;
    4. --color: rgba(255, 196, 0, 1);
    5. --color1: rgba(40, 212, 200, 1);
    6. --font16: 16px;
    7. --font18: 18px;
    8. --font20: 20px;
    9. --font22: 22px;
    10. --font24: 24px;
    11. --font26: 26px;
    12. --font28: 28px;
    13. --font32: 32px;
    14. --font48: 48px;
    15. --font56: 56px;
    16. }
    17. @media screen and (max-width:768px) {
    18. :root{
    19. --font16: 15px;
    20. --font18: 16px;
    21. --font20: 16px;
    22. --font22: 18px;
    23. --font24: 18px;
    24. --font26: 20px;
    25. --font28: 20px;
    26. --font32: 24px;
    27. --font48: 26px;
    28. --font56: 36px;
    29. }
    30. }

    3、文件路径及文件放置问题

    需要编译的文件放在assets的文件夹中(我这边只放了sass的文件)

    不需要编译的文件放在了static的文件夹中(分了css,images,js,font文件夹)

    路径引用

    nuxt.config.json中

    1. head: {
    2. title: 'nuxt网站',
    3. ... // 省略内容
    4. // 注意:在head中引入static的资源省略要@/static/直接使用打包后的路径
    5. link: [
    6. { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    7. ],
    8. script: [
    9. {src:'/js/wow.js'},
    10. {src:'/js/swiper.js'}
    11. ],
    12. },
    13. // 引入样式,可按正常的方式引入,css和scssd都可直接引入
    14. css: [
    15. '@/static/css/reset.css',
    16. '@/static/css/animate.css',
    17. 'element-ui/lib/theme-chalk/index.css',
    18. '@/static/css/swiper.css',
    19. '@/assets/scss/base.scss',
    20. ],
    21. // 引入js, js引入方法要放到plugins文件中
    22. plugins: [
    23. '@/plugins/element-ui',
    24. '@/plugins/format'
    25. ],

    html,css,js中引入

    1. <div class="ban_img" data-wow-delay="0s">
    2. <img src="~static/images/home/mobile.png" alt="ban" class="img"/>
    3. <img src="/images/home/mobile.png" alt="ban" class="img"/>
    4. div>
    5. <style lang="scss" scoped>
    6. @import "@/assets/scss/home.scss";
    7. .banner_box {
    8. position: relative;
    9. /*static中*/
    10. background: url('~static/images/home/banner_bg.png');
    11. background: url('/images/home/banner_bg.png');
    12. /*assets中,注意在css中的引用都不带"/"
    13. background: url('~assets/images/home/banner_bg.png');
    14. */
    15. background-size: 100% 100%;
    16. }
    17. style>
    18. <script>
    19. export default {
    20. data () {
    21. return {
    22. showList:[
    23. // static中的引入
    24. {id:'1',image:'/images/home/show1.jpg'},
    25. // assets中的引入
    26. {id:'2',image:require('~/assets/images/home/show2.jpg')},
    27. {id:'3',image:'/images/home/show3.jpg'},
    28. {id:'4',image:'/images/home/show4.jpg'},
    29. {id:'5',image:'/images/home/show5.jpg'},
    30. ]
    31. }
    32. },
    33. }
    34. script>

    4、使用插件或自己编写方法

     正常的例如wow,swiper等都可下载后放入static中,直接在nuxt.config.json的head中引入即可

    要封装方法,可在plugins文件夹中建js文件后,再在nuxt.config.json的plugins中引入即可,上面就引入可自定义的图片路径处理方法文件format.js,有其他方法或过滤器都可按照上述方法编写后,引入使用(可参考安装时element的编写方式)

    format.js

    1. import Vue from 'vue'
    2. let format = {
    3. install(Vue) {
    4. Vue.prototype.$formatImg = function(value){
    5. const imgPath = process.env.IMG_ROOT
    6. return imgPath + value
    7. };
    8. }
    9. }
    10. 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(地址路径根据自己的设置)

    1. export default {
    2. dev: {
    3. MODE: 'development',
    4. API_ROOT: '192.168.51:8899',//测试服务器地址
    5. IMG_ROOT: '192.168.51:8899/file'
    6. },
    7. pro: {
    8. MODE: 'production',
    9. API_ROOT: '192.168.51:8899',//正式服务器地址
    10. IMG_ROOT: '192.168.51:8899/file'
    11. }
    12. }

    在nuxt.config.js中引入和使用环境变量

    nuxt.config.js,文件的 ... 省略的代码

    1. import env from './env'
    2. export default {
    3. target: 'static', // default is 'server'
    4. head: {
    5. ...
    6. },
    7. env: {
    8. API_ROOT: env[process.env.MODE].API_ROOT,
    9. IMG_ROOT: env[process.env.MODE].IMG_ROOT,
    10. },
    11. // Global CSS: https://go.nuxtjs.dev/config-css
    12. css: [
    13. ...
    14. ],
    15. ...
    16. }

    配置api文件,可将所有api集中处理,新建api文件夹,在文件夹下建config.js和index.js

    config.js,配置axios的基本参数

    1. // 引用axios
    2. import axios from 'axios'
    3. // 配置API接口地址
    4. const root = process.env.API_ROOT
    5. const http = axios.create({
    6. timeout: 1000 * 10,
    7. baseURL: root,
    8. // headers: headers,
    9. withCredentials: false
    10. })
    11. // request 拦截器
    12. // 可以自请求发送前对请求做一些处理
    13. // 比如统一加token,对请求参数统一加密
    14. http.interceptors.request.use(config => {
    15. config.headers['Content-Type'] = 'appDownload/json;charset=utf-8';
    16. // config.headers['token'] = user.token; // 设置请求头
    17. return config
    18. }, error => {
    19. return Promise.reject(error)
    20. });
    21. // response 拦截器
    22. // 可以在接口响应后统一处理结果
    23. http.interceptors.response.use(
    24. response => {
    25. let res = response.data;
    26. // 如果是返回的文件
    27. if (response.config.responseType === 'blob') {
    28. return res
    29. }
    30. // 兼容服务端返回的字符串数据
    31. if (typeof res === 'string') {
    32. res = res ? JSON.parse(res) : res
    33. }
    34. return res;
    35. },
    36. error => {
    37. console.log('err' + error) // for debug
    38. return Promise.reject(error)
    39. }
    40. )
    41. export default http

    index.js,封装api,使用时引入即可, import {getNavigationList} from "@/api"

    1. import http from './config'
    2. // 获取导航
    3. export function getNavigationList(data) {
    4. return http({
    5. url: '/api/basic/getNavigationList',
    6. method: 'GET',
    7. params: data
    8. })
    9. }
    10. ...

    package.json,使用不同的命令即可使用不同的环境打包

    1. {
    2. "name": "website-nuxt",
    3. "version": "1.0.0",
    4. "private": true,
    5. "scripts": {
    6. "dev": "cross-env MODE=dev nuxt",
    7. "pro": "cross-env MODE=pro nuxt",
    8. "builddev": "cross-env MODE=dev nuxt build",
    9. "build": "cross-env MODE=pro nuxt build",
    10. "test": "cross-env MODE=dev nuxt generate",
    11. "generate": "cross-env MODE=pro nuxt generate"
    12. },
    13. "dependencies": {
    14. "axios": "^0.27.2",
    15. "core-js": "^3.19.3",
    16. "element-ui": "^2.15.6",
    17. "nuxt": "^2.15.8",
    18. "vue": "^2.6.14",
    19. "vue-server-renderer": "^2.6.14",
    20. "vue-template-compiler": "^2.6.14",
    21. "webpack": "^4.46.0"
    22. },
    23. "devDependencies": {
    24. "cross-env": "^7.0.3",
    25. "node-sass": "^5.0.0",
    26. "sass-loader": "^10.1.1"
    27. }
    28. }

     6、使用模板和数据的渲染

    通用头部和尾部

    laylouts中的default.vue文件,没有时要自己创建

    注意:该文件中的组件引入数据要使用fetch,不能使用asyncData,否则无法生效

    1. <script>
    2. import Footer from '@/components/footer/footer.vue'
    3. import Header from '@/components/header/header.vue'
    4. export default {
    5. components:{
    6. Header,
    7. Footer
    8. },
    9. watch: {
    10. /* 监听路由的变化,让页面回到顶部(
    11. 或直接在nuxt.config.json中配置
    12. router: {
    13. prefetchLinks: false,
    14. scrollBehavior(to, from, savedPosition) {
    15. if (to.fullPath !== from.fullPath) {
    16. return { x: 0, y: 0 }
    17. }
    18. },
    19. },
    20. */
    21. '$route': function(){
    22. document.body.scrollTop = 0
    23. document.documentElement.scrollTop = 0
    24. window.scrollTop = 0
    25. this.$refs.head.isActive = false // 头部使用了手机端折叠隐藏的效果
    26. }
    27. },
    28. }
    29. 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即可查看打包后的网站

  • 相关阅读:
    网安须知|什么是护网行动?什么是红蓝对抗?
    MySQL基础架构详解
    shadow复习之planar shadow
    【MybatisPlus】MP的分页查询、多条件查询以及查询过程中解决null的空值判定
    C#底层库--操作Excel帮助类(读取、导出表格)
    56个Python技巧,轻松掌握Python高效开发!可以收藏~
    Unity开发过程中的一些小知识点
    论文字数和检测字数有什么区别?
    零基础学Java有哪些必看书?推荐这5本
    函数的凹凸性与拐点习题
  • 原文地址:https://blog.csdn.net/Lisunlight/article/details/126761107