打包后elementui样式变了_部署后elementui图标乱码

在使用ElementUI框架进行前端开发时，有时会遇到打包后样式发生变化或图标乱码的问题。这些问题通常与Webpack配置、字体文件路径或环境变量设置有关。本文将提供几种解决方法，帮助开发者快速定位并解决问题。

1. 检查Webpack配置

首先，确保你的Webpack配置正确处理了CSS和字体文件。以下是一个基本的Webpack配置示例：

javascript
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { VueLoaderPlugin } = require('vue-loader');</p>

<p>module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /.scss$/,
        use: ['style-loader', 'css-loader', 'sass-loader']
      },
      {
        test: /.(png|jpe?g|gif|svg)(?.<em>)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: 'img/[name].[hash:7].[ext]'
        }
      },
      {
        test: /.(woff2?|eot|ttf|otf)(?.</em>)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: 'fonts/[name].[hash:7].[ext]'
        }
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin(),
    new HtmlWebpackPlugin({
      template: './public/index.html'
    })
  ],
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': path.resolve('src')
    }
  }
};

2. 确保字体文件路径正确

ElementUI的图标通常使用字体文件（如.woff, .ttf等）。确保这些文件在打包后的目录中正确加载。你可以在public目录下放置这些字体文件，并在CSS中引用它们。

例如，在public/fonts目录下放置字体文件，并在CSS中引用：

css
@font-face {
font-family: 'element-icons';
src: url('/fonts/element-icons.woff2') format('woff2'),
url('/fonts/element-icons.woff') format('woff');
font-weight: normal;
font-style: normal;
}


3. 检查环境变量

有时候，环境变量的设置也可能导致样式问题。确保你在不同的环境中（如开发环境和生产环境）使用正确的配置。

例如，在vue.config.js中设置不同环境的公共路径：

javascript
module.exports = {
publicPath: process.env.NODE_ENV === 'production' ? '/your-production-path/' : '/',
css: {
loaderOptions: {
sass: {
additionalData: `@import "@/styles/variables.scss";`
}
}
}
};


4. 使用CDN

如果上述方法都无法解决问题，可以考虑使用CDN来加载ElementUI的资源。这样可以避免本地路径和配置问题。

在public/index.html中添加CDN链接：

html
</p>



  
  
  <title>Document</title>
  


  <div id="app"></div>
  
  



<p>

通过以上几种方法，你应该能够解决打包后ElementUI样式变化和图标乱码的问题。希望这些解决方案对你有所帮助！