vue项目中的~到底代表什么，为何我使用的时候会报错

Question

<style lang="stylus" scoped rel="stylesheet/stylus">

@import "~common/stylus/variable"

  #app
    color:$color-theme

</style>

我在一些代码中看到有人这样使用，我猜测这可能是一种自动化的路径代替

但是我自己使用却报错了

必须换成

@import "./common/stylus/variable"

才能生效，我想知道这东西应该如何去使用

下面是报错提示

Module build failed: Error: C:\Users\Laoliu\VsCodeProject\vue-mobile-music-app\src\App.vue:15:9
   11| </script>
   12|
   13| <style lang="stylus" scoped rel="stylesheet/stylus">
   14|
   15| @import "~common/stylus/variable"
---------------^
   16|
   17|   #app
   18|     color:$color-theme

failed to locate @import file ~common/stylus/variable.styl

    at CachedPathEvaluator.visitImport (C:\Users\Laoliu\VsCodeProject\vue-mobile-music-app\node_modules\_stylus-loader@3.0.1@stylus-loader\lib\evalua
tor.js:157:21)
    at CachedPathEvaluator.Visitor.visit (C:\Users\Laoliu\VsCodeProject\vue-mobile-music-app\node_modules\_stylus@0.54.5@stylus\lib\visitor\index.js:
28:40)
    at CachedPathEvaluator.Evaluator.visit (C:\Users\Laoliu\VsCodeProject\vue-mobile-music-app\node_modules\_stylus@0.54.5@stylus\lib\visitor\evaluat
or.js:160:18)
    at CachedPathEvaluator.Evaluator.visitRoot (C:\Users\Laoliu\VsCodeProject\vue-mobile-music-app\node_modules\_stylus@0.54.5@stylus\lib\visitor\eva
luator.js:707:27)
    at CachedPathEvaluator.Visitor.visit (C:\Users\Laoliu\VsCodeProject\vue-mobile-music-app\node_modules\_stylus@0.54.5@stylus\lib\visitor\index.js:
28:40)
    at CachedPathEvaluator.Evaluator.visit (C:\Users\Laoliu\VsCodeProject\vue-mobile-music-app\node_modules\_stylus@0.54.5@stylus\lib\visitor\evaluat
or.js:160:18)
    at CachedPathEvaluator.Evaluator.evaluate (C:\Users\Laoliu\VsCodeProject\vue-mobile-music-app\node_modules\_stylus@0.54.5@stylus\lib\visitor\eval
uator.js:247:15)
    at Renderer.render (C:\Users\Laoliu\VsCodeProject\vue-mobile-music-app\node_modules\_stylus@0.54.5@stylus\lib\renderer.js:86:26)
    at C:\Users\Laoliu\VsCodeProject\vue-mobile-music-app\node_modules\_stylus-loader@3.0.1@stylus-loader\index.js:165:12
    at tryCatchReject (C:\Users\Laoliu\VsCodeProject\vue-mobile-music-app\node_modules\_when@3.6.4@when\lib\makePromise.js:840:30)
    at runContinuation1 (C:\Users\Laoliu\VsCodeProject\vue-mobile-music-app\node_modules\_when@3.6.4@when\lib\makePromise.js:799:4)
    at Fulfilled.when (C:\Users\Laoliu\VsCodeProject\vue-mobile-music-app\node_modules\_when@3.6.4@when\lib\makePromise.js:590:4)
    at Pending.run (C:\Users\Laoliu\VsCodeProject\vue-mobile-music-app\node_modules\_when@3.6.4@when\lib\makePromise.js:481:13)
    at Scheduler._drain (C:\Users\Laoliu\VsCodeProject\vue-mobile-music-app\node_modules\_when@3.6.4@when\lib\Scheduler.js:62:19)
    at Scheduler.drain (C:\Users\Laoliu\VsCodeProject\vue-mobile-music-app\node_modules\_when@3.6.4@when\lib\Scheduler.js:27:9)
    at _combinedTickCallback (internal/process/next_tick.js:131:7)

 @ ./~/_vue-style-loader@3.0.2@vue-style-loader!./~/_css-loader@0.28.7@css-loader?{"minimize":false,"sourceMap":false}!./~/_vue-loader@13.0.4@vue-loa
der/lib/style-compiler?{"vue":true,"id":"data-v-19b3b84a","scoped":true,"hasInlineConfig":false}!./~/_stylus-loader@3.0.1@stylus-loader?{"sourceMap":
false}!./~/_vue-loader@13.0.4@vue-loader/lib/selector.js?type=styles&index=0!./src/App.vue 4:14-454 13:3-17:5 14:22-462
 @ ./src/App.vue
 @ ./src/main.js
 @ multi ./build/dev-client ./src/main.js

Answer 1

https://athena0304.gitbooks.i...

Answer 2

~ 是哪个模块的功能？我想用用不了，alias里配置了了

我的配置

import { resolve } from 'path'
import webpack from 'webpack'
import MinaEntryPlugin from '@tinajs/mina-entry-webpack-plugin'
import MinaRuntimePlugin from '@tinajs/mina-runtime-webpack-plugin'
import UglifyJsPlugin from 'uglifyjs-webpack-plugin'

const isProduction = process.env.NODE_ENV === 'production'

const loaders = {
  script: 'babel-loader',
  style: {
    loader: 'postcss-loader',
    options: {
      config: {
        path: resolve('./postcss.config.js'),
      },
    },
  },
}

export default {
  context: resolve('src'),
  entry: './app.mina',
  output: {
    path: resolve('dist'),
    filename: '[name]',
    publicPath: '/',
  },
  module: {
    rules: [
      {
        test: /\.mina$/,
        exclude: /node_modules/,
        use: [
          {
            loader: '@tinajs/mina-loader',
            options: {
              loaders,
            },
          },
        ],
      },
      {
        test: /\.mina$/,
        include: /node_modules/,
        use: '@tinajs/mina-loader',
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: loaders.script,
      },
      {
        test: /\.(css|wxss|scss)$/,
        exclude: /node_modules/,
        use: loaders.style,
      },
      {
        test: /\.(png|jpg|jpeg|gif|svg)$/,
        use: {
          loader: 'file-loader',
          options: {
            name: 'assets/[name].[hash:6].[ext]',
          },
        },
      },
      {
        test: /\.wxs$/,
        use: {
          loader: 'relative-file-loader',
          options: {
            name: 'wxs/[name].[hash:6].[ext]',
          },
        },
      },
      {
        test: /\.wxml$/,
        use: [{
          loader: 'relative-file-loader',
          options: {
            name: 'wxml/[name].[hash:6].[ext]',
          },
        }, 'wxml-loader'],
      },
    ],
  },
  resolve: {
    symlinks: true,
    alias: {
      '@': resolve('src'),
    }
  },
  plugins: [
    new webpack.EnvironmentPlugin({
      NODE_ENV: 'development',
      DEBUG: false,
    }),
    new MinaEntryPlugin(),
    new MinaRuntimePlugin({
      runtime: './common.js',
    }),
    new webpack.optimize.CommonsChunkPlugin({
      name: 'common.js',
      minChunks: 2,
    }),
    isProduction && new UglifyJsPlugin(),
  ].filter(Boolean),
}

postcss.config.js

module.exports = {
  plugins: [
    require('precss')(),
    require('postcss-url')({ url: 'inline' }),
    require('postcss-px2units')({ comment: 'NO_RPX' }),
  ],
}

Answer 3

需要去webpack里面配置，有些人用@ 表示从src目录开始
如果你用脚手架的话，在目录结构里有个
build 的文件夹下面的wepack.base.conf.js
里面有以下代码

var path = require('path') //引入path模块
var utils = require('./utils') // 引入工具文件

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

var config = require('../config')
var vueLoaderConfig = require('./vue-loader.conf')

function resolve (dir) {
  return path.join(__dirname, '..', dir)
}

let webpackConfig = {
  entry: {
    app: './src/main.js'
  },
  output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
  },
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue
: 'vue/dist/vue.esm.js',
      '@': resolve('src')  //在这里，配置你的 波浪号 ~
    }
  },
  module: {
    rules: [
      {
        test: /\.(js|vue)$/,
        loader: 'eslint-loader',
        enforce: 'pre',
        include: [resolve('src'), resolve('test')],
        options: {
          formatter: require('eslint-friendly-formatter')
        }
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: vueLoaderConfig
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [resolve('src'), resolve('test')]
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
        }
      }
    ]
  }
}


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

Answer 4

~应该是默认代表当前项目的更目录，需要在alias里面配置个别名，我直接上代码吧

webpack.base.config.js文件里，我的scss文件都在common目录下面，所以在alias里配置了common别名：

    resolve: {
        extensions: ['.js', '.vue'],
        alias: {
            'vue': 'vue/dist/vue.esm.js',
            'components': resolve('src/components'),
            'common': resolve('src/common'),
            'config': resolve('src/config'),
            'views': resolve('src/views')
        }
    }

引用scss的代码：

<style scoped lang="scss">
    @import "~common/sass/variables";
    @import "~common/sass/mixin";
    /* ... */
</style>

亲测可以，有问题留言。