问题描述

vue h5项目移植至uni-app编译后报错

网上说是部分 loader 未安装，但是安装后报错依旧

相关代码

09:47:10.650 项目 'yunqi.mobile.2.0' 开始编译...
09:47:18.376  INFO  Starting development server...
09:47:40.864 Module parse failed: Unexpected token (23:7)
09:47:40.864 You may need an appropriate loader to handle this file type.
09:47:40.864 | loading:
09:47:40.864 |   en: loading
09:47:40.880 >   zh-CN: 加载中
09:47:40.880 | 
09:47:40.880 Module parse failed: Unexpected token (31:7)
09:47:40.896 You may need an appropriate loader to handle this file type.
09:47:40.896 | button_text:
09:47:40.911 |   en: OK
09:47:40.911 >   zh-CN: 确定
09:47:40.911 | 
09:47:40.911 Module parse failed: Unexpected token (34:7)
09:47:40.927 You may need an appropriate loader to handle this file type.
09:47:40.927 | back_text:
09:47:40.927 |   en: Back
09:47:40.927 >   zh-CN: 返回
09:47:40.943 | 
09:47:40.943 Module parse failed: Unexpected token (39:7)
09:47:40.943 You may need an appropriate loader to handle this file type.
09:47:40.943 | confirm_text:
09:47:40.958 |   en: confirm
09:47:40.958 >   zh-CN: 确定
09:47:40.974 | cancel_text:
09:47:40.974 |   en: cancel
09:47:40.974 Module parse failed: Unexpected token (42:7)
09:47:40.974 You may need an appropriate loader to handle this file type.
09:47:40.974 | cancel_text:
09:47:40.974 |   en: cancel
09:47:40.989 >   zh-CN: 取消
09:47:40.989 | confirm_text:
09:47:40.989 |   en: done
09:47:40.989 Module parse failed: Unexpected token (55:7)
09:47:41.005 You may need an appropriate loader to handle this file type.
09:47:41.005 | cancel_text:
09:47:41.005 |   en: cancel
09:47:41.005 >   zh-CN: 取消
09:47:41.021 | confirm_text:
09:47:41.021 |   en: ok
09:47:41.021 Module parse failed: Unexpected token (59:7)
09:47:41.021 You may need an appropriate loader to handle this file type.
09:47:41.036 | cancel_text:
09:47:41.036 |   en: cancel
09:47:41.036 >   zh-CN: 取消
09:47:41.036 | confirm_text:
09:47:41.052 |   en: done
09:47:41.052 Module parse failed: Unexpected token (64:7)
09:47:41.052 You may need an appropriate loader to handle this file type.
09:47:41.052 | cancel:
09:47:41.068 |   en: cancel
09:47:41.068 >   zh-CN: 取消
09:47:41.068 | 
09:47:41.068 Module parse failed: Unexpected token (70:7)
09:47:41.083 You may need an appropriate loader to handle this file type.
09:47:41.083 | cancel_text:
09:47:41.083 |   en: cancel
09:47:41.083 >   zh-CN: 取消
09:47:41.099 | placeholder:
09:47:41.099 |   en: Search
09:47:41.099 Module parse failed: Unexpected token (74:7)
09:47:41.099 You may need an appropriate loader to handle this file type.
09:47:41.114 | week_day_0:
09:47:41.114 |   en: Su
09:47:41.114 >   zh-CN: 日
09:47:41.114 | week_day_1:
09:47:41.130 |   en: Mo

package.json

{
  "name": "yunqi.mobile.2.0",
  "version": "1.0.0",
  "description": "1.0.0",
  "main": "main.js",
  "directories": {
    "test": "test"
  },
  "dependencies": {
    "axios": "^0.18.0",
    "babel-runtime": "^6.26.0",
    "css-loader": "^0.25.0",
    "eslint-loader": "^2.1.2",
    "fastclick": "^1.0.6",
    "inject-loader": "^4.0.1",
    "karma-sourcemap-loader": "^0.3.7",
    "less": "^2.7.3",
    "less-loader": "^2.2.3",
    "vue": "^2.6.9",
    
    "vue-router": "^3.0.2",
    "vue-style-loader": "^4.1.2",
    "vue-template-compiler": "^2.6.9",
    "vuex": "^3.1.0",
    "vux": "^2.9.2",
    "yaml-frontmatter-loader": "^0.1.0",
    "yaml-loader": "^0.5.0"
  },
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.3",
    "babel-helpers": "^6.24.1",
    "babel-loader": "^7.1.5",
    "babel-preset-env": "^1.7.0",
    "file-loader": "^3.0.1",
    "json-loader": "^0.5.7",
    "url-loader": "^1.1.2",
        "vue-loader": "^15.7.0",
    "vux-loader": "^1.2.9",
    "webpack": "^4.29.6"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

webpack.base.conf.js

var path = require('path');
var config = require('../config');
var utils = require('./utils');
var projectRoot = path.resolve(__dirname, '../');
const vuxLoader = require('vux-loader');

var env = process.env.NODE_ENV;
// check env & config/index.js to decide whether to enable CSS source maps for the
// various preprocessor loaders added to vue-loader at the end of this file
var cssSourceMapDev = env === 'development' && config.dev.cssSourceMap;
var cssSourceMapProd = env === 'production' && config.build.productionSourceMap;
var useCssSourceMap = cssSourceMapDev || cssSourceMapProd;

let webpackConfig = {
  entry: {
    app: './src/main.js'
  },
  output: {
    path: config.build.assetsRoot,
    publicPath:
      process.env.NODE_ENV === 'production'
        ? config.build.assetsPublicPath
        : config.dev.assetsPublicPath,
    filename: '[name].js'
  },
  resolve: {
    extensions: ['', '.js', '.vue', '.json'],
    fallback: [path.join(__dirname, '../node_modules')],
    alias: {
      vue$: 'vue/dist/vue.common.js',
      src: path.resolve(__dirname, '../src'),
      assets: path.resolve(__dirname, '../src/assets'),
      components: path.resolve(__dirname, '../src/components')
    }
  },
  resolveLoader: {
    fallback: [path.join(__dirname, '../node_modules')]
  },
  module: {
    loaders: [
      {
        test: /\.vue$/,
        loader: 'vue'
      },
      {
        test: /\.js$/,
        loader: 'babel',
        include: [path.join(projectRoot, 'src')],
        exclude: /node_modules/
      },
      {
        test: /\.json$/,
        loader: 'json'
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url',
        query: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url',
        query: {
          limit: 10000,
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
        }
      }
    ]
  },
  eslint: {
    formatter: require('eslint-friendly-formatter')
  },
  vue: {
    loaders: utils.cssLoaders({ sourceMap: useCssSourceMap }),
    postcss: [
      require('autoprefixer')({
        browsers: ['last 2 versions']
      })
    ]
  }
};

module.exports = vuxLoader.merge(webpackConfig, {
  plugins: [
    {
      name: 'vux-ui'
    },
    {
      name: 'duplicate-style'
    },
  ]
});