在laravel项目使用Vue2

2019独角兽企业重金招聘Python工程师标准>>>

关于Laravel，其实蛮久以前我就已经用过了，但是一直都是一些个人项目，没有在商业项目中使用过。而Vue呢，我自己一直在用，而且在有些项目的某些页面也有涉及到过。所以这次项目一下来，我分析了一下是一个偏向后台的项目，虽然我从来没有一起用过这俩，但男人总得最自己狠一点~ 于是就决定了这次要用Laravel + Vue。

刚开始我并不想用Laravel自带的laravel-elixir来进行vue的编译，用vue-cli来生成前端项目，但是发现确实是有一些坑不大好填，所以最后还是用了laravel-elixir来编译。

直接上步骤了

1. 在下载配置好Laravel之后，修改根目录下的package.json文件：

 {
  "private": true,
  "scripts": {
    "gulp": "gulp default",
    "prod": "gulp --production",
    "dev": "gulp watch"
  },
  "devDependencies": {
    "babel-plugin-component": "^0.6.0",
    "css-loader": "^0.26.0",
    "file-loader": "^0.9.0",
    "gulp": "^3.9.1",
    "laravel-elixir": "^6.0.0-9",
    "laravel-elixir-browsersync-official": "^1.0.0",
    "laravel-elixir-vue": "^0.1.4",
    "laravel-elixir-webpack-official": "^1.0.10",
    "style-loader": "^0.13.1"
  },
  "dependencies": {
    "vue": "^2.1.3",
    "vue-router": "^2.1.1",
    "element-ui": "^1.0.3"
  }
}

然后执行npm install(或者cnpm install)安装依赖（我本地的node版本是7.0）

2. 修改根目录下的gulpfile.js:

const path = require('path');
const elixir = require('laravel-elixir');
require('laravel-elixir-webpack-official');
require('laravel-elixir-vue');

elixir(mix => {

    Elixir.webpack.mergeConfig({
        output: {
            publicPath: '/assets/'
        },
        resolveLoader: {
            root: path.join(__dirname, 'node_modules')
        },
        module: {
            loaders: [
                {
                    test: /\.css$/,
                    loader: 'style-loader!css-loader'
                },
                {
                    test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
                    loader: 'file-loader',
                    query: {
                        name: '../assets/[hash].[ext]'
                    }
                },
                {
                    test: /\.(png|jpe?g|gif|svg)(\?\S*)?$/,
                    loader: 'file-loader',
                    query: {
                        name: '../assets/[hash].[ext]'
                    }
                }
            ]
        },
        resolve: {
            alias: {
                'vue': 'vue/dist/vue.js'
            }
        }
    });

    mix.webpack('./resources/assets/admin.js', './public/build');
});

通过Elixir.webpack.mergeConfig来覆盖掉默认的配置（重要！重要！重要！）：

• 定义资源引用的public目录，然后定义一些常用的loader，注意生成的文件目录默认是在根目录下的public/js里的，由于我想把资源单独放在一个文件里，所以就name里就加了../。

• 一定要自己加上这些loader，一开始我以为laravel-elixir自带这些loader，然后再使用ElementUI的时候愉快的报了没有loader的错误=。=

• 还有最后那个resolve的配置也必须要，不然js里import Vue from 'vue'到的就是vue.common.js(vue模块的入口)，而vue.common.js在这种编译过程中会一直报错~

3. 愉快的开始开发

• 在resource/assets里新建admin.js文件，以admin.js为入口编写vue前端项目；

• 在resource/views中新建blade视图模板，并且在添加相应的路由，最后引入js的路径为：

...
<script src="{{ asset('build/admin.js') }}"></script>

最后执行npm run dev实时进行编译，轻松加愉快~（另外使用npm run prod可以进行生产环境的打包）

最后

虽然写出来就这么点配置，但是却是我踩坑踩了整整一天搞出来的。。。只能说还是太菜，希望能帮到那些依然在坑里的盆友们~

转载于:https://my.oschina.net/prettypice/blog/799026