Skip to content

note.md

Latest commit

 

History

History
executable file
·
95 lines (65 loc) · 2.76 KB

note.md

File metadata and controls

executable file
·
95 lines (65 loc) · 2.76 KB

遇到问题一览

因为作者本身习惯了写原生 HTML 代码，所以在框架上有许多不熟悉的地方。以下列出了在这次项目中碰到的一些问题，也方便像我一样的框架初学者查看

index.html 在哪里？

手机端项目里有一些常见的<meta>标签，比如viewport，no-cache之类，包括每次<title>这些都要在index.html里定义。

index.html不在根目录下，而是在public文件夹里。

怎么没法console.log?一打console.log就报错，还无法编译？

出现这个问题主要是no-console的限制，eslint中有代码规范规定了在代码中不允许出现console.log，需要在package.json文件中修改eslintConfig的rules规则，示例如下：

"eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    // 关键代码
    "rules": {
      "no-console": "off"
    },
    "parserOptions": {
      "parser": "babel-eslint"
    }
  }

参考资料，最后一个例子 参考资料

sass-loader 怎么还需要自己安装？

vue-cli 默认不安装 sass，所以当引入 sass 后，会报错

Failed to resolve loader: sass-loader
You may need to install it.

尝试安装如下操作

npm install sass-loader node-sass webpack --save-dev

安装完成后，可能提示需要修复

npm audit fix

之后即可成功运行

参考资料

发布的一些问题

  1. vue.config.js
  • 这个文件需要自己新增，文件和package.json同级
  • 暂时没有放太多配置项在里面，可以随时添加，文档在这里
  1. 页面运行后无法加载 js 文件，观察 chrome 的 source 中的 js 文件，发现都是<!Doctype html>文件，根本没有展示真正内容
  • publicPath 出的问题，因为这个项目现在是两层： HTML%-TEMPLATE-VUE-V0.1 -> template-vue，所以路径要是./，在vue.config.js中写入一下内容
module.exports = {
    publicPath: './',
};

相对路径说明

a.vue 文件中写相对路径都是相对 a.vue 路径路径

"./1.jpg"           a.vue 相同目录下的 1.jpg 文件

"../1.jpg"          a.vue 上级目录下 1.jpg 文件

"../../1.jpg"       a.vue 上两级目录下 1.jpg 文件

"../../../1.jpg"      a.vue 上三级目录下 1.jpg 文件

作者：阿珂刺秦王 2018 链接：https://www.jianshu.com/p/f868acce6c62 来源：简书 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。