Vue CLI3.0<遇到的问题记录>

?安装：

点击查看文章

?项目搭建：

你可以通过 Git Bash 进行命令操作
详情可参考 此篇文章
此处注意 Windows 模式下尽量使用此命令，方便操作

$ winpty vue.cmd create hello-world

以下是官方解释 点击前往官方地址

建议使用 vue ui 图形界面创建项目

$ vue ui

第一步直接输入完项目名称，点击下一步

个人项目建议选择默认，公司项目建议选择手动配置，点击下一步

是否选择 history 模式(取决于 URL 有没有 # 号)，建议不要勾选，因为后端也是需要相关配置的，若需要的话可以在 router/index.js 里面进行修改

const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,
  routes
});

新增了一个 views 模块，因为我之前是直接在 components 里面进行页面开发的，所以猛地有点懵，其实就是一个规范，以后把页面和组件区分开就可以了 ~~

?点击创建项目，就可以了

注：通用的一个 vue.config.js 文件

const Timestamp = new Date().getTime();
// Vue.config.js 配置选项
module.exports = {
    // publicPath:process.env.NODE_ENV === 'production' ? '/vue_workspac/aihuhuproject/' : '/',

    //基本路径
    publicPath: './',//默认的'/'是绝对路径，如果不确定在根路径，改成相对路径'./'
    // 输出文件目录
    outputDir: 'dist',
    assetsDir: 'static',
    indexPath: 'index.html',
    // eslint-loader 是否在保存的时候检查
    lintOnSave: true,
    // 生产环境是否生成 sourceMap 文件
    productionSourceMap: false,
    // css相关配置
    css: {
        // 是否使用css分离插件 ExtractTextPlugin
        // extract: true,
        // 开启 CSS source maps?
        sourceMap: false,
    },
    // webpack-dev-server 相关配置
    devServer: {
        open: true,//open 在devServer启动且第一次构建完成时，自动用我们的系统的默认浏览器去打开要开发的网页
        host: '192.168.10.155',//默认是 localhost。如果你希望服务器外部可访问，指定如下 host: '0.0.0.0'，设置之后之后可以访问ip地址
        port: 8080,
        hot: true,//hot配置是否启用模块的热替换功能，devServer的默认行为是在发现源代码被变更后，通过自动刷新整个页面来做到事实预览，开启hot后，将在不刷新整个页面的情况下通过新模块替换老模块来做到实时预览。
        https: false,
        hotOnly: false,// hot 和 hotOnly 的区别是在某些模块不支持热更新的情况下，前者会自动刷新页面，后者不会刷新页面，而是在控制台输出热更新失败
        proxy: {
            '/api': {
                target: 'http://localhost:8080', //目标接口域名
                secure: false, //false为http访问，true为https访问
                changeOrigin: true, //是否跨域
                pathRewrite: {
                    '^/api': '' //重写接口
                }
            }
        }, // 设置代理
        before: app => { }
    },
    configureWebpack: { // webpack 配置
        output: { // 输出重构  打包编译后的 文件名称  【模块名称.版本号.时间戳】
            filename: `static/js/[name].${process.env.VUE_APP_Version}.${Timestamp}.js`,
            chunkFilename: `static/js/[name].${process.env.VUE_APP_Version}.${Timestamp}.js`
        },
    },
    // 第三方插件配置
    pluginOptions: {
        // ...
    }
};