nuxt2发布出现的问题

在nuxt2进行打包的时候,遇到图标不出现

解决办法

  • 第一步:在nuxt2中nuxt.conifg.jd中使用srcDir: 'src/',把所有文件放在src下面, nuxt.config.js
js 复制代码
import path from 'path'
export default {
  // Global page headers: https://go.nuxtjs.dev/config-head
  head: {
    title: 'e',
    htmlAttrs: {
      lang: 'en'
    },
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: '' },
      { name: 'format-detection', content: 'telephone=no' }
    ],
    link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }]
  },

  // Global CSS: https://go.nuxtjs.dev/config-css
  css: ['element-ui/lib/theme-chalk/index.css'],
  srcDir: 'src/',
  alias: {
    '@': path.resolve(__dirname, './src/'),
    '~': path.resolve(__dirname, './src/')
  },
  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
  plugins: ['@/plugins/element-ui'],

  // Auto import components: https://go.nuxtjs.dev/config-components
  components: true,

  // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
  buildModules: [
    // https://go.nuxtjs.dev/eslint
    '@nuxtjs/eslint-module'
  ],

  // Modules: https://go.nuxtjs.dev/config-modules
  modules: [
    // https://go.nuxtjs.dev/axios
    '@nuxtjs/axios'
  ],

  // Axios module configuration: https://go.nuxtjs.dev/config-axios
  axios: {
    // Workaround to avoid enforcing hard-coded localhost:3000: https://github.com/nuxt-community/axios-module/issues/308
    baseURL: '/'
  },

  // Build Configuration: https://go.nuxtjs.dev/config-build
  build: {
    transpile: [/^element-ui/]
    // publicPath: '/assets/'
  }
}

目录结构

  • 第二步:这个时候进行打包发布,会找不到link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],

  • 第三步:在上传文件到服器的时候,需要上传以下几个文件

上传到服务器就是这样,static这个文件必须放在src下面

  • 第四步:接下来就可以直接yarn,然后yarn start,就可以访问到了(前提是已经配置好了nginx进行转发,进行转发的时候,不要忘记配置服务器端口)
相关推荐
风止何安啊2 分钟前
一场组件的进化脱口秀——React从 “类” 到 “hooks” 的 “改头换面”
前端·react.js·面试
JS_GGbond2 分钟前
给数组装上超能力:JavaScript数组方法趣味指南
前端·javascript
前端无涯3 分钟前
Tailwind CSS v4 开发 APP 内嵌 H5:安卓 WebView 样式丢失问题解决与降级实战
前端
小邋遢2.05 分钟前
vscod 执行npm build报错:Error: Cannot find module ‘vite‘
前端·npm·node.js
是你的小橘呀6 分钟前
新手入门 React 必备:电影榜单项目核心知识点全解析
前端·javascript
yinmaisoft8 分钟前
JNPF 钉钉双向同步攻略:组织 / 用户一键打通,触发事件自动联动
前端·低代码·钉钉
梨子同志8 分钟前
Node.js Buffer 和 Stream
前端
鹏北海10 分钟前
微信扫码登录 iframe 方案中的状态拦截陷阱
前端·javascript·vue.js
狗哥哥12 分钟前
Vite 插件实战 v2:让 keep-alive 的“组件名”自动长出来
前端·vue.js·架构
小黑的铁粉12 分钟前
Vue2 vs Vue3
vue.js