Laravel 5.4 Vue组件npm run dev后字符转ASCII变问号解决方法

Hey there! Let's work through this character encoding issue you're hitting. When non-ASCII characters turn into question marks after compiling assets, it almost always boils down to encoding misconfigurations somewhere in the stack. Here's what to check step by step:

1. Confirm Vue Component File Encoding #

First, make sure all your .vue files are saved as UTF-8 (without BOM). Most code editors let you check and change this easily:

• In VS Code, look at the bottom-right corner for the current encoding (e.g., UTF-8). If it's something else, click it, select "Reopen with encoding", choose UTF-8, then save the file.
• For Sublime Text, go to File > Save with Encoding > UTF-8.

This is critical because if the file itself isn't UTF-8, the compiler can't read the characters correctly.

2. Tweak Laravel Mix (Webpack) Configuration #

Laravel 5.4 uses Laravel Mix under the hood. You might need to explicitly tell the vue-loader and babel-loader to use UTF-8 encoding. Open your webpack.mix.js and update it like this:

mix.js('resources/assets/js/app.js', 'public/js')
   .webpackConfig({
      module: {
         rules: [
            {
               test: /\.vue$/,
               loader: 'vue-loader',
               options: {
                  charset: 'utf-8' // Force UTF-8 processing for Vue files
               }
            },
            {
               test: /\.js$/,
               loader: 'babel-loader',
               options: {
                  charset: 'utf-8' // Ensure JS files are handled as UTF-8
               }
            }
         ]
      }
   });

After making this change, delete your node_modules folder and package-lock.json (or yarn.lock), run npm install to reset dependencies, then recompile with npm run dev.

3. Set UTF-8 in Your Blade Template #

Open your main layout blade file (usually resources/views/layouts/app.blade.php) and double-check that the meta charset tag is present and set correctly:

<meta charset="UTF-8">

Also, make sure this blade file is saved as UTF-8 too—same as your Vue components.

4. Verify Laravel & PHP Encoding Settings #

• Open config/app.php and confirm these lines are set properly:

  'charset' => 'UTF-8',
  'collation' => 'utf8_unicode_ci',
  

• Check your server's php.ini file (find its location with php --ini in the terminal) and ensure these settings are enabled:

  default_charset = "UTF-8"
  mbstring.internal_encoding = UTF-8
  mbstring.http_output = UTF-8
  

  Restart your web server after making changes to php.ini.

5. Clear All Caches #

Old cached assets or views can sometimes hold onto encoding issues. Run these commands in your project root to wipe them:

npm run clean
npm run dev
php artisan cache:clear
php artisan view:clear

Final Notes #

Start with the file encoding check—it fixes 90% of cases. If that doesn't work, move through the other steps one by one, recompiling with npm run dev after each change to test if the issue is resolved.

内容的提问来源于stack exchange，提问作者B nM