1、2.0与3.0的差异
2.x构建项目
2.x目录
3.x目录
1、去除了 static、config、build
2、新增了 public
3、自动依赖node_modules
4、默认配置 webpack,通过 vue.config.js 修改
5、vue inspect 可查看webpack 默认配置
6、内置了 vue-cli-service serve 服务
7、浏览器打开图形界面,vue ui 查看
2、vue.config.js
创建好项目后会自动生成一个vue.config.js文件这里我们要进行更改配置
报错:1、vue文件提示:💥No Babel config file detected或💥vscode弹出Vetur can’t find tsconfig.json, jsconfig.json in /xxxx/xxxxxx.
报错:2、若打开vue.config.js或其他文件后第一行有波浪线提示 但项目能正常运行💥 Parsing error: No Babel config file detected
1、配置.eslintrc.js文件 添加 requireConfigFile: false,
2、设置eslint.enable ----取消勾选---- (从报错信息可以看出没有语法错误只是没有符合ESLint的规范)
vue.config.js配置
const path = require('path');
module.exports = {
// 基本路径
publicPath: process.env.NODE_ENV === 'production' ? '' : '/',
// 输出文件目录
outputDir: process.env.NODE_ENV === 'production' ? 'dist' : 'devdist',
// eslint-loader 是否在保存的时候检查
lintOnSave: true,
/**
* webpack配置,see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
**/
chainWebpack: (config) => {
},
configureWebpack: (config) => {
// config.resolve = { // 配置解析别名
// extensions: ['.js', '.json', '.vue'],
// alias: {
// '@': path.resolve(__dirname, './src'),
// 'public': path.resolve(__dirname, './public'),
// 'components': path.resolve(__dirname, './src/components'),
// 'common': path.resolve(__dirname, './src/common'),
// 'api': path.resolve(__dirname, './src/api'),
// 'views': path.resolve(__dirname, './src/views'),
// 'data': path.resolve(__dirname, './src/data')
// }
// }
},
// 生产环境是否生成 sourceMap 文件
productionSourceMap: false,
// css相关配置
css: {
// 是否使用css分离插件 ExtractTextPlugin
extract: true,
// 开启 CSS source maps?
sourceMap: false,
// css预设器配置项
loaderOptions: {
// 如发现 css.modules 报错,请查看这里:http://www.web-jshtml.cn/#/detailed?id=12
sass: {
data: `@import "./src/styles/main.scss";`
}
},
// 启用 CSS modules for all css / pre-processor files.
modules: false
},
// use thread-loader for babel & TS in production build
// enabled by default if the machine has more than 1 cores
parallel: require('os').cpus()